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Avant-propos 

Le collection Guide du codeur s'adresse aux personnes initiees a la programmation 
qui souhaitent decouvrir une technologie particuliere. Sans negliger les aspects 
theoriques, nous donnons toujours priorite a la pratique afin que vous puissiez 
rapidement etre autonome. Avant d'entrer dans le vif du sujet, notez ces quelques 
informations generates a propos de la collection. 

Conventions typographiques 

Afin de faciliter la comprehension de techniques decrites, nous avons adopte les 
conventions typographiques suivantes : 

■ gras : menu, commande, boite de dialogue, bouton, onglet. 

■ italique : zone de texte, liste deroulante, case a cocher, bouton radio. 

■ Police baton : instruction, listing, texte a saisir. 

■ : dans les programmes, indique un retour a la ligne du aux contraintes de la 
mise en page. 

«\arque 

Propose conseils et trues pratiques 

^ention 

Met I'accent sur un point important, souvent d'ordre technique qu'il ne faut 
negliger a aucun prix. 





, , &nition 

Donne en quelques lignes la definition d'un terme technique ou d'une 
abreviation. 



J 



s,uce 

II s'agit d'informations supplementaires relatives au sujet traite. 
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Introduction 



Presentation 

Cet ouvrage est le fruit de l'experience de trois auteurs : Antoine Griffard et 
Patrice Lamarche (MVP) sont membres de l'equipe Wygwam, composee 
d' experts .NET reconnus par leurs pairs et par Microsoft, qui les designe 
comme Most Valuable Professionals et Regional Director. Mauricio Diaz est 
formateur a SUPINFO, ou il donne des cours pour le Laboratoire .NET. 

Cet ouvrage vise a vous apprendre a programmer grace a la gamme d'outils 
gratuits Visual Studio Express de Microsoft, qui comprend entre autres : 

■ Visual Basic 2005 Express Edition, pour le developpement d' applications 
Windows en Visual Basic ; 

■ Visual Web Developer Express Edition, pour le developpement d' applica- 
tions web ; 

■ SQL Server 2005 Express Edition, pour la gestion de bases de donnees. 

Ces outils permettent aux etudiants, aux utilisateurs avances, aux programmeurs 
debutants ou passionnes, de decouvrir la programmation et d'approfondir leurs 
connaissances grace a des environnements de developpement proches de ceux 
utilises par les developpeurs professionnels. 

II ne s'agit pas de vous noyer sous de nombreuses informations theoriques a 
propos du developpement d' applications, de la programmation orientee objet. 
Vous serez guide pas a pas pour realiser quelques exemples d' applications, 
pretextes a la decouverte d'un domaine que Ton pense souvent reserver a des 
genies de l'informatique. Cela pouvait etre vrai auparavant, mais c'est loin 
d'etre le cas a present, notamment grace a Visual Basic. Ce langage simple et 
puissant permet de realiser rapidement des applications aussi variees que des 
sites web personnels, des gestionnaires de performances ou encore des traite- 
ments de texte. 

Alors, n'attendez plus, apprenez par la pratique a construire des applications 
avec Visual Basic 2005 Express Edition. 

Pour telecharger les bootstrappers seulement (ceux-ci vont ensuite, une fois 
executes, lancer le telechargement complet pour une installation dans la 
foulee) : 

■ Visual Basic 2005 Express : http://download.microsoft.eom/download/8/7/9/ 
87938b02-80fa-430a-9e69-9a56a41d20967vbsetup.exe. 

■ Visual Web Developer 2005 Express : http://dOwnload.microsoft.com/ 
download/5/a/7/5a7c77cb-3ebe-4cc3-900a-e958488e686e/vwdsetup.exe. 

■ SQL Server 2005 Express : http://download.microsoft.eom/download/5/6/l/ 
561c80b2-e77f-4b0c-8c40-0ae512el36f57SQLEXPR_FRN.EXE. 
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Pour telecharger les images ISO (et graver un CD par exemple) : 

■ Visual Basic 2005 Express : http://download.microsoft.eom/download/7/5/b/ 
75bl2965-b2de-4a42-b5el-bda6b2cf7c01/vb.iso. 

■ Visual Web Developer 2005 Express : http://dOwnload.microsoft.com/ 
download/4/9/f/49f9dd2a-d537-4d40-a!27-add7f7327a47/vwd.iso. 
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Gestion simple d'une videotheque 

v 



Si vous avez une collection de CD, de DVD, de timbres postaux, etc., vous 
savez combien il est difficile de trouver un bon logiciel pour la gerer. Vous allez 
done, au cours de ce chapitre, developper votre propre application qui vous 
permettra, d'une maniere simple, de gerer votre collection de DVD. 

Realiser une application, basee sur une base de donnees, avec la plateforme 
.NET, est une tache facile. Vous vous en rendrez compte a travers cet exemple, 
que vous pourrez adapter pour qu'il reponde mieux a vos besoins. 



1.1 Configuration 

En plus de Visual Basic 2005 Express, que vous utiliserez pour ecrire votre 
programme, vous aurez besoin de SQL Server 2005 Express, qui sera votre 
systeme de gestion de bases de donnees (SGBD). 

Ces deux produits sont mis a disposition gratuitement sur Internet par Micro- 
soft. 

f^^^Referez-vous aux annexes de ce livre pour les adresses. 
Renvoi 



1 .2 Classes et espaces de noms utilises 

Vous ferez appel principalement a des classes dans les espaces de noms 
System. Windows. Forms et System. Data. Cependant, vous ne vous en rendrez 
peut-etre pas compte car la plupart des manipulations se feront via le Concep- 
teur de vues de Visual Basic 2005 Express. 



1 .3 Acces aux donnees 

Une fois que vous aurez cree un projet de type Application Windows, vous 
pourrez commencer a travailler sur votre application en commencant par la 
creation de la base de donnees sur laquelle elle se basera. 

Creation de la base de donnees 

Pour creer votre base de donnees, cliquez du bouton droit sur le nom de votre 
projet et selectionnez la commande Nouvel element du sous-menu Ajouter. 
Saisissez MesDVDs comme nom de votre base. 
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Acces aux donnees 



Ajouter un nouvel element - MesDVDs 



Modeles Visual Studio installed 



□ H 



Windows Form BoTte de 
dialogue 



Formulaire Formulaire BoTte de Formulaire de Ecran de 

Explorateur parent MDI dialogu... connexion demarrage 



Base de 
donnees SQL 



Controle 
utilisateur 



Base de donnees SQL vide pour des donnees locales 
Norn : MesDVDs[mdf 



[ Ajouter | | Annuler 



▲ Figure 1-1 : Creation d'une nouvelle base de donnees 

L' Assistant Configuration de source de donnees se lance lorsque vous cliquez 
sur OK. Vous pouvez le fermer en cliquant sur Terminer, car, votre nouvelle 
base ne contenant pas d' elements, il n'y a rien a configurer pour le moment. 
Remarquez les fichiers MesDVDs. mdf et app.config, qui sont apparus dans 
1' Explorateur de solutions. 



^arque 

^* Travailler avec des bases de donnees dans Visual Basic 2005 Express 

Le fichier visible dans I'Explorateur de solutions, et qui se trouve dans le 
repertoire de votre projet, correspond a la version de votre base de donnees 
qui sera modifiee par I'environnement de developpement. II fait office de base 
vierge et il est copie dans le repertoire de deploiement de votre application 
chaque fois que la solution est generee. 

Le fichier original ne contient souvent que la structure de la base. C'est dans la 
copie sur laquelle vous travaillerez lorsque vous deboguerez votre application ou 
lorsque vous la deploierez que vous allez stacker vos donnees. 



Le premier fichier correspond a votre base de donnees SQL Server 2005. Le 
deuxieme est un fichier XML qui a ete cree pour stocker, entre autres, la chaine 
de connexion a la base. 
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<connect i onStri ngs> 

odd name="MesDVDs.My.MySettings.MesDVDsConnectionStn'ng" 
connecti onStri ng="Data Source= . \SQLEXPRESS ; 
AttachDbFi 1 ename= | DataDi rectory | \MesDVDs .mdf ; 
Integrated Security=True;User Instance=True" 
provi derName="System. Data . Sql CI i ent " /> 
</connecti onStri ngs> 

▲ ChaTne de connexion a la base de donnees 

Dans la chaine de connexion sont specifies des parametres tels que les 
identifiants et 1' emplacement de la base. Par defaut, celle-ci se situe dans le 
meme dossier que l'application. 



Configuration des tables 



Vous allez maintenant ajouter une table a votre base de donnees pour y stocker 
des informations. Double-cliquez sur le fichier .mdf que vous venez de creer : 
l'Explorateur de bases de donnees apparait. 



Explorateur de bases de do... •* -P X 



smarrage | Fqi 
0" encodii 



B f|J Connexions de donnees 
J,. MesDVDs.rndf 
+ _j Schemas de base de doi 

i+j ^-j y L | Ajouter une nouvelle table 
+ _j Pr 



ons> 
l" mas:-- 



Nouvelle requete 



ffl CJ 5v 3 Actualiser 
♦ _l Tv ^ Proprietes 

+ _J AS5cnroT75 



ce name= 



A Figure 1-2 : 

Ajouter des tables a 
votre base de 
donnees 



Cliquez du bouton droit sur le dossier Tables pour en ajouter une nouvelle. 
Creez les champs de votre base conformement a 1' image suivante : 



Nom de la colonne 


Type de donnees 


Null autorise 




ID 


int 


□ 




Titre 


nvarchar(255) 


□ 




Description 


nvarchar(MAX) 






Acteurs 


nvarchar(255) 


a 




Realisateur 


nvarchar(255) 


0 




Annee 


int 


0 




Fichierlmage 


nvarchar(255) 


0 



Figure 1-3 : 

Champs de la base 
MesDVDs 



Pour definir la cle primaire de votre table, cliquez du bouton droit sur le 
champ ID et selectionnez la commande Definir la cle primaire. Vous allez aussi 
modifier les proprietes de ce champ afin que sa valeur soit auto-incrementee a 
chaque insertion. 
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Proprietes des colonnes 



□ Specification du compteur 


Oui 




(Est d'identite) 


Oui 




Debut du compteur 


0 




Increment du compteur 


1 




Taille 


4 




Type de donnees condense 


int 





■< Figure 1-4 : 

Auto-incrementer la 
cle primaire 

Pour finir, appelez votre table DVD en modifiant la propriete (Norn) dans le volet 
des proprietes. 



Configuration de la source de donnees 

Maintenant que votre table est configuree, elle peut etre utilisee comme source 
de donnees par l'environnement de developpement. 

Affichez le volet Sources de donnees a l'aide de la commande Afficher les 
sources de donnees du menu Donnees. Vous y trouverez une source appelee 
MesDVDsDataSet qui a ete creee automatiquement en meme temps que votre 
base de donnees. Cependant, elle n'est pas encore liee a la table qui se trouve 
maintenant dans celle-ci. Pour la lier, cliquez sur le bouton Configurer le 
DataSet a l'aide de I'Assistant et selectionnez la table DVD dans l'arborescence. 



Sources de donnees t f X 



^5] MesDVDsDataSet 



Figure 1-5 : Creation d'un DataSet 
type 



Sources de donnees ▼ ^ X 


j ip ^ Lb 


- MesDVDsDataSet 


£ O DVD 




i") ID 




abcl Titre 




abcl Description 




abcl Acteurs 




abcl Realisateur 




iii3l Annee 




.abcj Fichierlmage 



Figure 1-6 : Les elements de la 
table DVD 



Maintenant que votre source de donnees est configuree, vous pouvez concevoir 
1' interface graphique de votre application. 
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1.4 Interface utilisateur 

Votre application sera constituee d'une fenetre qui affichera une liste de DVD 
dans sa partie superieure et les details du film selectionne dans la partie 
inferieure. 



IS MesDVDs 




00® 


: 1 i 







Filtner: 





Titre 


Description 


► 


| Shrek 






0® 



Titre 

Shrek 



Annie: 2003 ; | 
Description: 



Realisateur : Andrew Adamson. Mcky Jenson 



▲ Figure 1-7 : Interface graphique de I'application terminee 



Mise en place des composants 

Votre fenetre propose, dans sa partie superieure, une liste de films qui se 
trouvent actuellement dans la base de donnees. Cette liste permettra de 
selectionner un film pour afficher ses details dans la partie inferieure. De plus, 
les elements de la liste pourront etre filtres par des mots-cles saisis dans le 
champ de texte qui se trouve au-dessus de celle-ci. 

Commencez par ajouter un controle Label auquel vous changerez la propriete 
Text afin qu'il affiche Filtrer : et ajoutez un controle TextBox a cote de 
celui-ci. Modifiez la propriete (Name) du champ de texte en lui attribuant la 
valeur Filtre. Placez-les vers le haut du formulaire, mais laissez de la place 
pour inserer une barre d'outils par la suite. 
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En dessous des controles que vous venez d'ajouter, deposez un controle de type 
DataGridView. Ignorez les options de configuration de la balise active pour le 
moment. Vous allez y revenir une fois que tous les controles seront en place. 

Glissez maintenant un controle GroupBox en dessous du DataGridView et placez 
une PictureBox et deux controles de type Button a l'interieur. Saisissez Detai 1 s 
dans la propriete Text du controle GroupBox pour modifier son titre. 

L'un des boutons servira a ouvrir une image et 1' autre a la supprimer. Changez 
les proprietes (Name) et Text de ceux-ci en leur donnant les valeurs Ouvri r et 
Supprimer. Vous pouvez aussi attribuer une image aux boutons, si vous le 
desirez, en modifiant leur propriete Image. 

Enfin, saisissez la valeur Zoom dans la propriete SizeMode du controle Pictu- 
reBox afin que les images soient redimensionnees sans etre deformees lorsqu'el- 
les sont trop grandes pour leur conteneur. 

Liaison des composants aux donnees 

Avant de lier a votre base de donnees certains composants que vous venez 
d'inserer, vous allez utiliser Visual Basic 2005 Express pour inserer des 
controles. En ce sens, recourez a la liste qui se trouve dans le volet Sources de 
donnees. 

Glissez le controle Titre qui se trouve dans le volet Sources de donnees dans 
votre formulaire : deux controles, Label et TextBox, sont automatiquement crees 
et, plus important encore, ce dernier est automatiquement lie a votre base de 
donnees. Cela veut dire que, pour un enregistrement donne, votre application 
sera capable d'afficher dans ce champ la valeur de la colonne Titre de votre 
table DVD. Lorsque vous lui demanderez de faire une mise a jour, elle saura aussi 
quelle est la colonne a modifier. 

Des controles sont apparus dans la section de controles non visibles de votre 
application : 

■ MesDVDsDataSet stockera temporairement les donnees que vous recupere- 
rez a partir de la base de donnees pendant que vous travaillez dessus. 

■ DVDBindingSource servira de source de donnees aux controles lies a la 
base, comme le controle DataGridView que vous avez insere precedem- 
ment et TextBox qui a ete insere lorsque vous avez glisse le champ Titre 
dans le formulaire. 

■ DVDTabl eAdapter est l'objet que vous allez utiliser pour communiquer avec 
la base de donnees. 

■ DVDBindingNavi gator correspond a la barre d'outils qui est apparue en 
haut de votre formulaire. 
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Vous allez maintenant ajouter les autres composants correspondant aux colon- 
nes de votre table, a commencer par l'Annee. Toutefois, pour vous assurer que 
la valeur saisie pour l'annee sera numerique, vous allez cliquer sur le bouton 
fleche qui apparait a cote du controle pour selectionner le type NumericUpDown. 
Lorsque vous glissez le controle sur le formulaire, un Label est ajoute, comme 
pour le titre, mais a la place du controle TextBox, vous aurez un controle 
NumericUpDown, qui ne peut contenir que des nombres. Ajoutez aussi les champs 
Description, Acteurs et Realisateur. 

Pour finir, liez le controle DataGridView a votre source de donnees a l'aide de 
sa balise active. 




DVOBindingSource 



Taches DataGridView 

Choisir la source de donnees 

Modifier les colonnes... 

Ajouter une colonne... 
I Activer I'ajout 
I O Activer la modification 
I 0 Activer la suppression 

O Activer la reorganisation des colonnes 

Ancrer dans le conteneur parent 



Ajouter une requete.. 
Apercu des donnees.. 



Figure 1-8 : Lier le 
controle 

DataGridView a la 
source de donnees 
□VDBindingSource 



Cliquez aussi sur le lien Modifier les colonnes pour supprimer toutes les 
colonnes, sauf Titre et Description . 

II ne reste plus qu'un controle a lier a votre base de donnees : PictureBox. 
Toutefois, vous devrez faire cette liaison en ecrivant le code necessaire a la 
main dans la section suivante. 



1.5 Realisation 

La plupart de vos controles ont ete lies a la source de donnees par l'environ- 
nement de developpement de sorte que votre application est presque finie. 
Toutefois, il reste encore un controle a lier et quelques gestionnaires d'evene- 
ments a ecrire pour rendre l'utilisation du programme plus agreable. 
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Liaison de controles par le code 

Afin de Her les controles restants a la source de donnees DVDBindingSource, 
double-cliquez sur le formulaire pour acceder au gestionnaire d'evenements 
Load. En dessous de la ligne qui sert a charger le MesDVDsDataSet avec les 
donnees de la base, liez la propriete ImageLocation du controle PictureBox que 
vous avez insere dans votre formulaire a la valeur de la colonne Fichierlmage. 

Private Sub Forml_Load(ByVal sender As System. Object, 
ByVal e As System. EventArgs) Handles MyBase.Load 
Me . DVDTabl eAdapter . Fi 11 (Me . MesDVDsDataSet . DVD) 
Me . Pi ctureBoxl . DataBi ndi ngs . Add ( 
New Binding ("ImageLocation", Me. DVDBindingSource, 
"Fichierlmage", True)) 

End Sub 

▲ Liaison du controle PictureBox a la source de donnees 

Maintenant que votre controle est lie a la source de donnees, vous pouvez 
sauvegarder le chemin de l'image affiche dans le controle PictureBox dans la 
base de donnees. Vous ne pouvez pas, pour 1' instant, associer une image a ce 
controle. 

Vous allez done implementer les gestionnaires d'evenements Click des deux 
boutons que vous avez places dans le formulaire pour associer, ou dissocier, 
une image et l'enregistrement courant. 

Private Sub Ouvrir_Click(ByVal sender As System. Object, 
ByVal e As System. EventArgs) Handles Ouvrir. Click 
Dim OpenFileDialog As New OpenFileDialog 
If OpenFileDialog. ShowDialog = DialogResult.OK Then 

Pi ctureBoxl. ImageLocation = OpenFileDialog.FileName 
End If 
End Sub 

Private Sub Supprimer_Click(ByVal sender As System. Object, 
ByVal e As System. EventArgs) Handles Supprimer. Click 

Pi ctureBoxl. ImageLocation = String. Empty 
End Sub 

A Associer et dissocier une image et l'enregistrement courant 

La premiere methode est appelee lorsque Ton clique sur le bouton Ouvrir, et 
elle utilise un controle OpenFi 1 eDi al og pour chercher l'image a afficher dans le 
controle PictureBox. Le chemin de l'image est automatiquement associe a 
l'enregistrement courant, car la propriete ImageLocation est liee a la colonne 
Fichierlmage. La deuxieme methode sert simplement a effacer la valeur de la 
propriete ImageLocation, ce qui a pour effet d'effacer l'image du controle et de 
la base. 
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^ention 

7* L'emplacement des images 

Etant donne que dans la base de donnees ne sont stockes que les chemins vers 
les images, si vous supprimez ces dernieres, elles ne pourront plus etre 
affichees par I'application. Pensez, par exemple, a placer toutes vos images 
dans un dossier reserve a votre collection pour eviter ce probleme. 



Vous pouvez a present ajouter des enregistrements dans la base de donnees a 
l'aide de la barre d'outils DVDBi ndi ngNavi gator et de vos controles lies. 
Cependant, l'interface graphique vous autorise encore a faire des manipulations 
qui peuvent generer des erreurs. Pour eviter cela, vous aller creer quelques 
gestionnaires d'evenements de plus dans la section suivante. 



Ameliorer I'ergonomie de I'application 

Pour empecher les utilisateurs de saisir des donnees quand aucun enregistre- 
ment n'est selectionne, desactivez tous les controles lies a la base de donnees. 
Heureusement, tous ces controles se trouvent dans un controle GroupBox, ce qui 
veut dire qu'il suffit de modifier la propriete Enabl ed de ce dernier pour activer 
ou desactiver tous les controles qu'il contient. 

Ecrivez done le gestionnaire d'evenements ListChanged du controle DVDBi n- 
dingSource, votre source de donnees. Ce type d'evenement sera declenche au 
demarrage de I'application et a chaque fois qu'un enregistrement de la base sera 
ajoute ou supprime. 

Private Sub DVDBi ndi ngSource_ListChanged( 
ByVal sender As System. Object, 

ByVal e As System. ComponentModel .Li stChangedEventArgs) 
Handl es DVDBi ndi ngSource . Li stChanged 
If DVDBi ndi ngSource. Count = 0 Then 
GroupBoxl. Enabled = False 

Else 

GroupBoxl. Enabled = True 

If TitreTextBox. Text. Length = 0 Then 

Ti treTextBox. Focus () 
End If 
End If 
End Sub 

▲ Desactiver les controles quand aucun enregistrement n'est selectionne 

On verifie le nombre d' enregistrements dans la source de donnees et on 
desactive le controle GroupBox, et done tous les controles qui se trouvent a 
l'interieur, si ce nombre est nul. Dans le cas contraire, les controles doivent etre 
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actives. Une fois les controles actives, le curseur est place dans le champ de 
texte correspondant au titre, s'il est vide, pour permettre a l'utilisateur de saisir 
une valeur. 



^arque 

Of Tester I'application 

Si vous testez votre application maintenant, vous pouvez utiliser la barre d'outils 
et les champs lies pour ajouter des enregistrements dans la base. 

Toutefois, si vous lancez votre application a partir de Visual Basic 2005 
Express, la base de donnees de I'application dans laquelle vous avez fait des 
modifications sera ecrasee par la base de donnees vierge de la solution. Vous 
devez chercher I'executable de votre projet et le lancer directement si vous 
souhaitez tester la persistance des donnees. 



II y a un autre detail genant dans le fonctionnement de votre application : si 
vous ne cliquez pas sur le bouton Sauvegarder de la barre d'outils avant de la 
quitter, vous perdez les donnees qui n'ont pas ete enregistrees. Vous allez done 
gerer l'evenement FormClosing de votre formulaire pour enregistrer tous les 
changements avant de quitter I'application. 

Private Sub Forml_FormClosing(ByVal sender As Object, 
ByVal e As FormClosingEventArgs) 
Handles MyBase. FormClosing 
Me . DVDBi ndi ngSource . EndEdi t () 

If Me.MesDVDsDataSet.DVD.GetChanges() IsNot Nothing Then 

Me . DVDTabl eAdapter . Update (Me . MesDVDsDataSet . DVD) 
End If 
End Sub 

A Enregistrer les donnees avant de quitter I'application 

Ce code termine l'edition de l'enregistrement courant et verifie si la table a ete 
modifiee grace a la methode GetChanges. Si e'est le cas, elle est mise a jour a 
l'aide de la methode Update du DVDTabl eAdapter. 



Filtrer la collection 

Lorsque votre collection aura atteint une certaine taille, vous desirerez surement 
faire des recherches parmi vos DVD. Pour cette raison, vous avez prevu un 
champ de texte appele Filtrer dans votre formulaire. II s'agit, d'ailleurs, du seul 
controle de saisie qui n'a pas ete lie a la source de donnees. 

Vous allez creer un gestionnaire d'evenements TextChanged pour ce champ de 
texte. 
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Private Sub Filtre_TextChanged(ByVal sender As Object, 
ByVal e As System. EventArgs) Handles Filtre.TextChanged 
If Filtre. Text. Length > 2 Then 

Me. DVDBindingSource. Filter = String. Format ( 
"{0} like '%{1}%' OR {2} like _ 
Me.MesDVDsDataSet.DVD.TitreColumn.ColumnName, 
Me. Filtre. Text, 

Me .MesDVDsDataSet . DVD . Descri pti onCol umn . Col umnName) 
End If 
End Sub 

▲ Filtrer la source de donnees 

Tout d'abord, on verifie que le texte saisi comme filtre a, au moins, trois 
caracteres. Une longueur inferieure nuirait aux performances de 1' application 
puisque un trop grand nombre de resultats serait renvoye. 

Une fois la longueur du filtre verifiee, il ne reste plus qu'a construire une clause 
WHERE pour l'appliquer au controle DVDBindingSource. La clause creee compare 
le texte saisi dans le champ Filtre avec le titre et la description de chaque 
enregistrement dans la base, des que ce texte depasse une longueur de deux 
caracteres. Le fait d'utiliser l'evenement TextChanged au lieu d'un bouton, par 
exemple, fait que les resultats sont affiches immediatement au fur et a mesure 
que l'utilisateur saisit sa requete. 

Votre application est maintenant prete a gerer votre collection de DVD. 

1.6 Check-list 

La realisation de cette application vous a permis d'apprendre a : 

■ creer et gerer une base de donnees SQL Server 2005 Express a partir de 
Visual Basic 2005 Express ; 

■ utiliser une base de donnees SQL Server 2005 Express comme source de 
donnees de l' application ; 

■ lier des controles de l'application Windows aux donnees fournies par une 
source. 
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La plateforme .NET fournit des classes servant a charger, a manipuler et a 
afficher des images de differents formats. Vous allez utiliser ces classes pour 
ecrire un programme permettant de visualiser et de realiser des transformations 
simples sur des photographies et des images ail format JPEG. 

En developpant cette application, vous apprendrez a vous servir des fonction- 
nalites de base de ces classes et vous decouvrirez une astuce pour enregistrer 
des images qui sont chargees en memoire dans leur fichier d'origine, une source 
d'erreurs souvent difficile a detecter. 



2.1 Classes et espaces de noms utilises 

II s'agit ici d'une application Windows. Vous aurez done besoin de l'espace de 
noms System. Windows. Forms. 

De plus, pour la manipulation d'images, vous aurez besoin de fonctionnalites 
de la librairie GDI+, qui sont encapsulees dans des classes se trouvant dans 
l'espace de noms System. Drawing. En particulier, les classes Image et Bitmap de 
l'espace de noms System. Drawing vous permettront d'effectuer toutes les 
operations dont vous avez besoin. 

Enfin, pour la manipulation des fichiers, vous aurez besoin des classes de 
l'espace de noms System. IO. 

2.2 Interface utilisateur 

Votre application sera constitute d'un seul formulaire qui affichera, a gauche, 
les apercus des images contenues dans un repertoire choisi par l'utilisateur, et 
a droite, la photo selectionnee en grand format ainsi que la barre d'outils 
servant a la manipuler. 
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A Figure 2-1 : Interface graphique de I'album de photos 
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Preparer le formulaire principal 

Commencez par creer un nouveau projet de type Application Windows. II 
contiendra, par defaut, un formulaire de demarrage appele Forml. Vous allez 
changer ce nom par un libelle plus parlant grace a la propriete (Name) dans le 
volet des proprietes. Appelez votre formulaire Al bumPhotos. 



Proprietes 



AlbumPhotos System, Windows. For » 

B (ApplicationSe 
E (DataBindings^ 

(Name) AlbumPhotos 

AcceptButton (aucun) 
AccessibleDes 
AccessibleNarr 
AccessibleRole Default 
AllowDrop False 
AutoScaleMod Font 



(Name) 

Indique le nom utilise dans le code pour 
identifier I'objet. 



-4 Figure 2-2 : Personnaliser les 
proprietes d'un formulaire 

Modifiez aussi la propriete Text en saisissant le texte Album Photos. 



Proprietes 



AlbumPhotos System, Windows, For * 

H See 300; 300 

SizeGripStyle Auto 
StartPosition WindowsDeFaultLoc. 
Tag 

Text Album Photos 

TopMost False 
Transparency! | 
UseWaitCurso False 
WindowState Normal 



Text 

Le texte associe au controle, 



< Figure 2-3 : Les proprietes 

Ces deux modifications permettront non seulement de personnaliser 1' interface 
graphique de votre application, mais aussi de rendre votre code auto-descriptif 
de maniere a faciliter sa maintenance et sa comprehension par la suite. 

Enfin, avant de commencer a ajouter d'autres elements de l'interface graphique, 
glissez un controle de type FolderBrowserDialog et un autre de type SaveFi- 
leDialog dans votre formulaire. Ces controles ne sont pas visibles dans le 
formulaire, mais ils vous permettront de selectionner le repertoire dans lequel 
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se trouvent les fichiers que vous souhaitez parcourir ainsi que le nom d'une 
image lorsque vous voudrez l'enregistrer. 



Barres de menus et d'etat 

Vous devez maintenant ajouter une barre de menus a votre application. Cette 
barre ne contiendra qu'un seul menu, en l'occurrence Fichier. II permettra a 
l'utilisateur de charger dans l'application les images d'un repertoire sur le 
disque dur ou de quitter l'application. 

Glissez, a partir de la boite a outils, un controle de type MenuStrip dans votre 
formulaire. Ce controle se trouve dans la categorie Menus et barres d'outils. 
Remarquez comme la barre vient se positionner automatiquement en haut de 
votre formulaire. 



- Menus et barres d'outils 

^ Pointeur 

^ ContextMenuStrip 



- MenuStrip 



1 StatusStrip 

SI ToolStrip 

Tj TooiStripContainer 



■< Figure 2-4 : Inserer une barre de 
menus dans un formulaire 



Appelez le premier, et le seul, menu de la barre &Fichier. L'esperluette devant 
le nom du menu permettra a l'utilisateur d'y acceder par un raccourci clavier. 



H Album Photos 




|&Fichieil 






Tapez ici 





J I ■< Figure 2-5 : Saisie du menu 

Une fois que vous avez ajoute sous ce menu les commandes &0uvrir et 
&Quitter, separees par un Separator, cliquez sur la commande Ouvrir afin de 
configurer un raccourci clavier et une icone pour celle-ci. 

Cherchez la propriete ShortcutKeys et cliquez sur son bouton fleche afin de 
specifier le raccourci clavier | Ctrl ) +{0\. Modifiez ensuite, si vous le souhaitez, la 
propriete Image afin de specifier une icone a afficher a cote de la commande. 
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Proprietes ▼ 4 X 

OuvrirToolStripMenuItem Systerr » 

%mm\ s m 

RightToLeft No 
RightToLeftAL False 
ShortcutKeyDi 



Modificateurs : 
0 Ctrl □ Shift □ Alt 
Touche : 



ShortcutKeys 

La touche de raccourci associee a 
I'element de menu. 



A Figure 2-6 : Attribuer un raccourci 
a une commande d'un menu 



Album Photos 




•4 Figure 2-7 : Menu Fichier termine 



II ne reste plus qu'a inserer une barre d'etat dans le formulaire en glissant, a 
partir de la boite a outils, un controle de type StatusStri p. La barre viendra se 
positionner en bas du formulaire, permettant aux utilisateurs de 1' application de 
le redimensionner plus facilement. 



Diviser un formulaire en deux 

Le menu et la barre d'etat en place, vous pouvez diviser l'espace restant de 
votre application en deux parties : celle de gauche affichera les miniatures des 
fichiers que l'utilisateur aura charges grace a la commande Ouvrir, et celle de 
droite affichera une version grand format de l'image que l'utilisateur aura 
selectionnee. 

Pour diviser votre formulaire, glissez dessus un controle de type Spl itContai - 
ner. Ce controle se trouve dans la categorie Conteneurs de la boite a outils. 
Remarquez comme il adapte sa taille pour occuper automatiquement l'espace 
entre la barre de menus et celle d'etat. Double-cliquez sur la propriete 
IsSpl itterfixed de votre Spl itContai ner pour changer sa valeur a True afin 
d'eviter que l'utilisateur ne deplace le separateur entre les deux parties de votre 
formulaire. 



Le guide du codeur • 33 



Gestion d'un album de photos 

v 



Panneau de gauche 



A gauche, votre application affichera une liste de miniatures des images se 
trouvant dans un repertoire donne. Le meilleur moyen pour parvenir a ce 
resultat est d'utiliser un controle ListView. En effet, ce controle permet, comme 
son nom l'indique, d'afficher des listes et, en plus, d'associer une image a 
chaque element de ladite liste. 

Toutefois, les images utilisees ne se trouvent pas directement dans le controle 
ListView. Vous devez ajouter dans votre formulaire un controle ImageList, qui 
se trouve dans la section Composants de la boite a outils. Configurez la 
propriete ImageSize du controle pour que les images stockees aient une largeur 
et une hauteur de 100 pixels. 



Proprietes » Q X 

ImageListl System. Windows. Form: - 

(Name) ImageListl A 

ColorDepth Depth8Bit 

GenerateMem True 

Images (Collection) 

B ImageSize 100; 100 

Width 100 

Height 100 

Modifiers Friend 



< Figure 2-8 : Modifier la dimension 
des images dans une ImageList 



Glissez maintenant, a partir de la section Controles communs de la boite a outils, 
un controle ListView dans le panneau de gauche de votre Spl i tContai ner. 

Pour configurer ce controle, cliquez sur la fleche de balise active et sur la 
commande Ancrer dans le conteneur parent. La liste occupera alors tout 
l'espace disponible dans le panneau. Verifiez ensuite que le champ Vue contient 
bien la valeur Largelcon. Modifiez la valeur si ce n'est pas le cas. Associez 
1' ImageList que vous venez de creer au controle en selectionnant la valeur 
appropriee dans le champ Grand ImageList. Enfin, pensez a changer la valeur de 
la propriete Multi Select afin qu'un seul element du controle puisse etre 
selectionne a la fois. 













laches ListView 


Modifier les elements 
Modifier les colonnes 
Modifier les groupes 


Vue Largelcon 








Petit ImageList (aucun) 




Grand ImageList ImageListl 


V 


Annuler I'ancraae dans te conteneur parent 









Figure 2-9 : 

Configuration du 
controle ListView 
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Panneau de droite 

Ce panneau contiendra une barre d'outils qui permettra de naviguer dans la liste 
et de manipuler les images, ainsi qu'un controle PictureBox qui permettra 
d'afficher l'image selectionnee. 

Commencez par deposer un controle Tool Strip dans le Panel 2 de votre 
Spl itContainer. En cliquant sur la fleche de balise active, configurez les 
proprietes Dock a Bottom et Gn'pStyle a Hidden. 



laches ToolStrip 


Incorporer dans ToolStripContainer 
Inserer des elements standard 


Render Mode ManagerRenderMode v 






Dock 
GripStyle 

Modifier les ek 


Bottom 
















None 



Figure 2-10 : Positionner le 
controle ToolStrip 



Ajoutez des boutons et des separateurs a votre barre d'outils pour arriver au 
resultat suivant : 

< Figure 2-1 1 : 

Barre d'outils de 
I'album de photos 

Dans l'ordre, les boutons s'appellent : PrecedentToolStripButton, SuivantTo- 
ol Stri pButton, RetournerHTool Stri pButton, RetournerVTool Stri pButton, Pi- 
voterDTool Stri pButton, Pi voterGTool Stri pButton, Copi erTool Stri pButton, 
Enregi strerTool Stri pButton, Enregi strerSousTool Stri pButton, SupprimerTo- 
ol Stri pButton. Les noms et les images parlent d'eux-memes. Pensez a mettre 
la propriete Enabled de tous ces boutons a False, afin qu'ils ne soient pas 
accessibles avant le chargement des images. 

Finalement, glissez un controle PictureBox dans l'espace inoccupe et, a l'aide 
de la fleche de balise active, ancrez-le au conteneur parent et selectionnez le 
mode de redimensionnement Centerlmage. 

Vous etes maintenant pret a donner vie a votre interface. 
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2.3 Realisation 

II y a trois regions dans l'application avec lesquelles l'utilisateur peut interagir : 
le menu Fichier, la ListBox qui affichera les images et, enfin, la barre d'outils. 
Vous allez ecrire des gestionnaires d'evenements pour les controles de chacune 
de ces regions. 

Si vous lancez votre application telle qu'elle est et si la taille des panneaux du 
Spl itContainer ne vous convient pas, fixez la largeur du panneau de gauche 
dans le gestionnaire d'evenements Load de votre formulaire : 

Private Sub Forml_Load (ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Spl itContainerl. Spl itterDi stance = 160 
End Sub 

▲ Definition de la taille des panneaux du SplitContainer 
Ce detail regie, vous pouvez commencer a programmer le menu Fichier. 

Menu Fichier 

Le code de la commande Quitter est trivial (un simple appel a la methode Close 
du formulaire) et ne sera done pas decrit en detail. En revanche, le gestionnaire 
d'evenements Click de la commande Ouvrir est l'une des methodes les plus 
importantes de l'application. Voici son implementation : 

Private Sub OuvrirToolStripMenuItem_Click(ByVal sender As 
System. Object, ByVal e As System. EventArgs) 
FolderBrowserDialogl.SelectedPath = 

My . Computer . Fi 1 eSystem. Speci al Di rectori es .MyPi ctures 
If FolderBrowserDialogl.ShowDialog = DialogResult.OK _ 
Then 

ImageLi stl . Images .CI ear() 
ListViewl.Items.ClearO 

For Each file As String In 
Di rectory .Get Fi 1 es (Fol derBrowserDi al ogl .Sel ectedPath, 

"*.jp*g") 

Dim index As Integer = 
ImageListl. Images. Add (Obtenirlmage (file) , 
Nothing) 

Dim photo As ListViewItem = New _ 
Li stVi ewItem(Path .GetFi 1 eNameWi thoutExtension (f i 1 e) , i ndex) 
photo. Tag = file 
Li stViewl. Items. Add (photo) 

Next 

For Each tsi As ToolStripItem In Tool Stri pi. Items 
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tsi. Enabled = (ListViewl. Items. Count > 0) 

Next 

If (ListViewl. Items. Count > 0) Then 
Li stViewl. Items (0) .Selected = True 

Else 

Pi ctureBoxl. Image = Nothing 
End If 
End If 
End Sub 

▲ Peupler une ListBox avec les images contenues dans un repertoire 

La plupart du code est auto-explicatif : on commence par configurer le 
FolderBrowserDialog pour que le chemin par defaut soit celui du repertoire 
Mes Images et ensuite on l'affiche. Si l'utilisateur valide un choix en utilisant 
le bouton OK, le travail commence. 

Tout d'abord, on doit supprimer les eventuelles images susceptibles d'etre 
stockees dans l'lmageList ainsi que les miniatures afiichees dans la ListView. 
Ensuite on here sur la liste de fichiers ayant les extensions .jpg ou .jpeg dans 
le repertoire selectionne par l'utilisateur, que Ton recupere en utilisant la 
methode GetFiles de la classe Directory. 

Pour chaque image, on cree une miniature dans l'lmageList. L'image que Ton 
insere dans 1' ImageLi st n'a pas ete creee avec la methode FromFi 1 e de la classe 
Image ou encore avec le constructeur de la classe Bitmap, mais avec une 
fonction appelee Obteni rlmage. Retenez pour l'instant que cette fonction 
retourne un objet de type Image, les raisons de ce choix sont expliquees dans le 
prochain encadre. 

Ensuite, un ListViewItem est cree auquel on associe le nom du fichier, sans 
extension, et le numero d'image obtenu lorsque Ton a cree la miniature dans 
l'lmageList. La propriete Tag de ce ListViewItem contiendra le chemin complet 
vers l'image originale, qui sera utilise a plusieurs reprises par la suite. Enfin, 
l'element est ajoute dans le controle ListView. 

Une fois les miniatures creees et affichees, il faut activer ou desactiver les 
boutons de la barre d'outils selon que images ont ete trouvees ou non dans le 
repertoire fourni, ce que Ton peut aisement determiner en verifiant que le 
nombre d'elements dans la ListView est superieur a 0. Ensuite, il suffit d'iterer 
sur la collection Items de la barre et d'attribuer la valeur appropriee a la 
propriete Enabl ed de chaque bouton. 

Finalement, s'il y a bien des elements dans le controle ListView, le premier 
d'entre eux est selectionne, ce qui affichera l'image correspondante dans le 
controle PictureBox. Dans le cas contraire, l'image de ce dernier est effacee. 
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^uce 

y Travailler avec des images 

Bien que la plateforme .NET prevoie maintes possibilites pour charger une 
image en memoire, cela represents un danger potentiel : on ne peut pas 
garantir que les objets concernes auront libere le fichier source lorsque I'on 
voudra recrire dessus, a moins de les detruire. La solution consiste a detruire 
I'objet qui aura charge I'image le plus vite possible et a ne manipuler qu'une 
copie tout au long du programme. C'est justement ce que fait la fonction 

Obtenirlmage : 

Private Function Obteni rImage(ByRef chemin As String) 
As Image 

Dim original As Bitmap = New Bitmap (chemin) 

Dim copie As Bitmap = New Bitmap(original .Width, 

original .Height, 
original .Pixel Format) 

Dim g As Graphics = Graphics. Fromlmage (copie) 

g.DrawImage(original , 0, 0) 

g.Dispose() 

original .Dispose() 

Return copie 
End Function 

▲ Obtenirlmage charge une image en memoire et en renvoie une copie 



Afficher I'image selection nee 

Vous affichez desormais les miniatures des images dans le controle ListView a 
gauche. Vous devez maintenant gerer l'evenement Sel ectedlndexChanged de ce 
controle afin que I'image selectionnee soit affichee dans le controle PictureBox. 

Private Sub ListView_SelectedIndexChanged(ByVal sender 
As System. Object, ByVal e As System. EventArgs) 
If ListViewl.Selectedltems. Count > 0 Then 
Pi ctureBoxl. Image = 
Obtenirlmage (Li stViewl. Sel ectedl terns (0) .Tag) 

If (Pi ctureBoxl. Image. Width > Width Or _ 
Pi ctureBoxl. Image. Height > Height) Then 
Pi ctureBoxl. Si zeMode = PictureBoxSizeMode.Zoom 

Else 

Pi ctureBoxl. Si zeMode = 
Pi ctureBoxSi zeMode . Centerlmage 
End If 
End If 
End Sub 

▲ Afficher I'image selectionnee dans le controle PictureBox 
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Apres avoir verifie qu'il y a bien une miniature selectionnee, vous pouvez 
utiliser la fonction Obteni rlmage pour charger la photo a partir du chemin 
stocke dans la propriete Tag du premier objet selectionne du controle ListView. 
Si l'image est plus grande que le controle Pi ctureBox, elle est affichee en mode 
Zoom, sinon elle est centree dans le controle. 

Barre d'outils 

Etant donne la similitude de nombreux boutons de la barre d'outils, la gestion 
de leurs evenements Click peut se faire avec seulement cinq gestionnaires 
d'evenements simples. 

Commencez par les boutons permettant la navigation : 

Private Sub Navigation(ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
With ListViewl 
If .Items. Count > 0 Then 
Dim Selectedlndex As Integer 
If .Selectedlndices. Count = 0 Then 

Selectedlndex = 0 
Else 

Selectedlndex = .Selectedlndices(O) 
If sender. Equal s(PrecedentToolStripButton) 
And .Selectedlndices(O) > 0 Then 

Selectedlndex = .Selectedlndices(O) - 1 
El self sender. Equal s(SuivantToolStripButton) 
And .Selectedlndices(O) < .Items. Count - 1 Then 

Selectedlndex = .Selectedlndices(O) + 1 

End If 
End If 

.Items (Selectedlndex) .Selected = True 
. EnsureVi si bl e(Sel ectedlndex) 
End If 
End With 
End Sub 

▲ Gestionnaire d'evenements pour les boutons de navigation 

Cette methode recupere 1' index de la miniature selectionnee et, en fonction du 
bouton selectionne et de la disponibilite des images, selectionne l'index 
precedent ou suivant, ce qui provoquera l'affichage de la photo en grand format 
dans le controle Pi ctureBox. La methode EnsureVi si bl e s'assure que l'element 
selectionne sera toujours visible dans le controle ListView. 

Le gestionnaire des quatre boutons de transformation est un peu plus complique 
car il y a plus d' options a considerer : 
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Private Sub Transformations (ByVal sender As 
System. Object, ByVal e As System. EventArgs]" 
With PictureBoxl 

If sender. Equal s(RetournerHToolStripButton) Then 
. Image . RotateFl i p (RotateFl i pType . RotateNoneFl i pX) 
El self sender. Equal s(RetournerVToolStripButton) Then 
. Image. RotateFl ip(RotateFl ipType. RotateNoneFl ipY) 
El self sender. Equals (Pi voterDToolStripButton) Then 
. Image . RotateFl i p (RotateFl i pType . Rotate90Fl i pNone) 
El self sender. Equals (Pi voterGToolStripButton) Then 
. Image . RotateFl i p (RotateFl i pType . Rotate270Fl i pNone) 
End If 

If (.Image. Width > .Width Or _ 
.Image. Height > .Height) Then 
.SizeMode = PictureBoxSizeMode.Zoom 

Else 

.SizeMode = PictureBoxSizeMode.Centerlmage 
End If 

. Refresh () 
End With 
End Sub 

▲ Gestionnaire d'evenements des boutons de transformation 

On utilise la methode RotateFl ip avec une valeur de l'enumeration Rotate- 
Fi 1 pType pour realiser la transformation. Ensuite, on appelle la methode 
Refresh sur le controle PictureBox afin de s'assurer que les transformations 
seront visibles des la fin de l'execution de la procedure. 

Les gestionnaires des boutons Copier et Supprimer sont si simples qu'ils ne 
meritent pas que Ton s'attarde dessus. Souvenez-vous seulement que la 
propriete Tag de chaque ListViewItem contient le chemin complet du fichier 
image. 

Private Sub Copier(ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
My . Computer . CI i pboard . Set Image (Pi ctureBoxl . Image) 
End Sub 



Private Sub Supprimer(ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Fi 1 e. Del ete (Li stVi ewl . Sel ectedl terns (0) . Tag) 
Li stVi ewl . I terns . Remove ( Li stVi ewl . Sel ectedltems (0) ) 
Pi ctureBoxl. Image = Nothing 

End Sub 

▲ Gestionnaires d'evenements des boutons Copier et Supprimer 
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Finalement, etant donne les precautions qui ont ete prises lors du chargement 
des photos, le gestionnaire des boutons Enregistrer et Enregistrer Sous est lui 
aussi fort simple. II suffit de determiner, en fonction du bouton sur lequel 
l'utilisateur a clique, si l'image doit etre enregistree a son emplacement 
d'origine ou s'il est necessaire d'afficher un SaveFileDialog afin de demander 
un nouvel emplacement. Ensuite, on utilise la methode Save de l'image du 
PictureBox pour enregistrer la photo et Ton met a jour le controle ListView 
avec une nouvelle miniature. 

Private Sub Enregistrer(ByVal sender As Object, 
ByVal e As System. EventArgs) 
Dim chemin As String = Nothing 

If sender. Equal s(EnregistrerToolStripButton) Then 

chemin = ListViewl.Selectedltems(O) .Tag 
El self (SaveFileDialogl.ShowDialog = 

Wi ndows . Forms .Dial ogResul t .OK) Then 

chemin = SaveFileDialogl.FileName 
End If 

If Not String. I sNullOrEmpty (chemin) Then 
Pi ctureBoxl. Image. Save(chemin) 
ImageLi stl . Images . Item( 
Li stViewl.Selectedltems(O) .Index) = - 
New Bitmap (Pi ctureBoxl. Image, 100, 100) 
ListViewl.Refresh() 
End If 
End Sub 

A Gestionnaire d'evenements des boutons d'enregisterment 

Les fonctionnalites de base etant implementees, vous pouvez profiter de votre 
nouvel album de photos. 



2.4 Check-list 

Le developpement de cette application vous a permis d'apprendre a : 

■ manipuler des fichiers au format JPEG avec la plateforme .NET ; 

■ eviter des erreurs lors de l'ecriture de fichiers image charges avec les 
classes Bitmap et Image ; 

■ realiser des transformations simples sur des images, a l'aide de ces memes 
classes. 
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Vous allez tirer parti, dans ce chapitre, des fonctionnalites de messagerie et de 
cryptographic que propose la plateforme .NET. 

L'application que vous obtiendrez vous permettra de chiffrer vos messages 
importants avant de les envoyer par courrier electronique. Vous utiliserez pour 
cela un algorithme de chiffrage symetrique, dont le fonctionnement vous sera 
explique en detail. 



3.1 Classes et espaces de noms utilises 

Comme pour toute application Windows, vous aurez besoin de l'espace de 
noms System.Windows. Forms. De plus, votre application fera appel a de 
nombreuses bibliotheques de classes de base, telles que System. Net. Mail pour 
l'envoi des messages et System. Securty. Cryptography pour le chiffrement. 

Enfin, vous aurez besoin de quelques classes auxiliaires qui se trouvent dans les 
espaces de noms System. Text et System. IO. 



3.2 Interface utilisateur 

Vous allez creer deux formulaires pour cette application : un premier, le 
principal, qui permettra aux utilisateurs de composer un message et de 
l'envoyer, chiffre, s'il le desire, a un destinataire, et un second, qui lui permettra 
de dechiffrer les messages qu'il recoit. 



Formulaire principal 



Lorsque vous creerez un nouveau projet de type Application Windows, Visual 
Basic 2005 Express preparera pour vous un formulaire qui sera affiche au 
demarrage de l'application. Vous allez ajouter des controles a ce formulaire pour 
permettre a un utilisateur d' envoyer des messages par courrier electronique. 



Fichier Outiis 

_] Envoyer Chffrer et Envoyer 



Objet 
Mot de passe 



A Figure 3-1 : Formulaire principal de l'application 
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Commencez par glisser un controle de type MenuStrip, un autre de type 
Tool Strip et un autre de type StatusStrip, que vous trouverez dans la section 
Menus et banes d'outils de la boite a outils, dans le formulaire. Ces controles 
vont se placer automatiquement a leurs positions habituelles, c'est-a-dire, en 
haut du formulaire pour les deux premiers, et en bas pour le dernier. 



- Menus et barres d'outils 

1^ Pointeur 

ContextMenuStrip 



K MenuStrip 



i StatusStrip 

i2M ToolStrip 

Tj ToolStripContainer 



■< Figure 3-2 : Controles MenuStrip, 
StatusStrip et ToolStrip dans la boite a 
outils 



Dans cette application, le controle StatusStri p aura un role purement decoratif. 
En revanche, vous devrez ajouter des menus et des boutons au MenuStrip et au 
ToolStrip pour pouvoir les utiliser pour realiser des actions. 

Ajoutez maintenant les menus et les commandes du controle MenuStri p. Vous 
devez obtenir un menu Fichier avec les commandes Nouveau et Quitter, et un 
menu Outils avec la commande Dechiffrer. 



^uca 

X Creation de menus 

Vous pouvez utiliser la fleche de balise active qui apparalt a droite du controle 
MenuStrip lorsque celui-ci est selectionne, pour inserer automatiquement les 
menus les plus utilises. 





1 ' CryptoMail -OX 




Fichier Outils | Tape 


laches MenuStrip 




Incorporer dans ToolStripContainer 
Inserer des elements standard 




RenderMode ManagerRenderMode v 
Dock | Top v 
Gripstyle | Hidden 


Modifier les elements... 







A Figure 3-3 : Insertion d'elements standard dans un MenuStrip a I'aide 
de la fleche de balise active 

J 
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X Les menus ajoutes sont deja configures avec des images et des options 
d'accessibilite, ce qui vous fera gagner du temps. Vous etes libre ensuite 
modifier ou de supprimer les menus dont vous n'avez pas besoin. 



ns V 
de 



Ajoutez deux boutons dans la barre d'outils grace au bouton qui apparait 
lorsque le controle est selectionne. Renommez-les en modifiant leur propriete 
(Name) : le premier s'appellera Envoyer et le deuxieme Chi ffrerEtEnvoyer. 
Choisissez des images pour chacun des boutons en modifiant leur propriete 
Image et modifiez aussi leur propriete Text afin que le premier affiche Envoyer 
et l'autre Chiffrer et Envoyer. Pour que les boutons affichent l'image et le 
texte, vous devrez aussi modifier leur propriete DisplayStyle et lui attribuer la 
valeur ImageAndText. 

< Figure 3-4 : Barre 
d'outils 



J Envoyer Chiffrer et Envoyer 



Avant de vous occuper des autres composants de votre formulaire, deposez un 
controle de type Tabl eLayoutPanel dans celui-ci. II permet de placer les 
controles d'un formulaire de maniere tabulaire, ce qui est approprie dans le cas 
de la presente application. 

Pour configurer Tabl eLayoutPanel , cliquez sur le lien Modifiez les lignes et les 
colonnes du menu de la balise active. La fenetre Styles de ligne et de colonne 
s'ouvre. Dans la liste deroulante Afficher, selectionnez Lignes et utilisez le 
bouton Ajouter pour inserer trois nouvelles lignes afin d'en avoir cinq au total. 
Enfin, dans le volet des proprietes, attribuez la valeur Fi 1 1 a la propriete Dock 
du controle Tabl eLayoutPanel afin que celui-ci occupe tout l'espace disponible 
entre les barres d'outils et d'etat. Ne vous souciez pas de la taille des cellules 
pour l'instant, vous y reviendrez des que les autres composants seront en place. 

Glissez maintenant quatre controles Label dans la premiere cellule des quatre 
premieres lignes, et quatre controles TextBox a cote de celles-ci, ainsi qu'un 
cinquieme dans la premiere colonne de la derniere ligne. 

Modifiez les proprietes des controles que vous venez d' ajouter comme suit : 



Proprietes des controles du formulaire principal 



Controles Label 


Controles TextBox 


Text 


Dock 


(Name) 


Dock 


De : 


Right 


DeTextBox 


Fill 


A : 




ATextBox 




Ob jet : 




ObjetTextBox 
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Proprietes des controles du formulaire principal 


Controles Label 


Controles TextBox 


Mot de passe : 




MdpTextBox 








MessageTextBox 





Selectionnez le controle MessageTextBox et modifiez ses proprietes Multiline a 
True et Col umnSpan a 2, pour pouvoir ecrire plusieurs lignes et pour que la zone 
de texte s'etende sur les deux colonnes de la ligne. Modifiez aussi la propriete 
UseSystemPasswordChar du controle MdpTextBox en lui attribuant la valeur True, 
pour que les caracteres du mot de passe soient remplaces par un symbole 
special lors de l'affichage. 

Pour terminer, ouvrez la fenetre Styles de ligne et de colonne du controle 
Tabl eLayoutPanel pour changer la taille des lignes et des colonnes. Selection- 
nez 1' option Redimensionner automatiquement dans la rubrique Type de taille 
pour toutes les lignes et toutes les colonnes. Si vous faites cela lorsque vous 
ajoutez les lignes supplementaires a votre controle, vous obtenez des lignes et 
des colonnes trop petites pour y placer les differents elements. 

Maintenant que le formulaire principal est termine, il faut creer un deuxieme 
formulaire qui vous permettra de dechiffrer vos messages. 

Formulaire de dechiffrement 

Pour ajouter un formulaire a votre projet, cliquez du bouton droit sur le nom de 
celui-ci et selectionnez Formulaire Windows dans le sous-menu Ajouter. 
Appelez votre nouveau formulaire Dechiffrer, en ecrivant cette valeur dans le 
champ de texte Nom et en cliquant sur OK. 

Vous allez utiliser un nouveau controle Tabl eLayoutPanel dans ce formulaire, 
qui aura trois lignes et trois colonnes. En plus, vous affecterez a sa propriete 
Dock la valeur Fill pour que la grille comprenne tout le formulaire. 

Ajoutez maintenant des controles Label, TextBox et Button dans la premiere 
ligne, et deux TextBox dans la deuxieme et la troisieme ligne. Configurez-les en 
vous basant sur le tableau suivant : 



Proprietes des controles du formulaire de dechiffrement 




(Name) 


Text 


Dock 


Multiline 


Label 




Mot de 
passe : 


Fill 




TextBox 


MdpTextBox 




Fill 




Button 




Dechiffrer 
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Proprieties des controles du formulaire de dechiffrement 





(Name) 


Text 


Dock 


Multiline 


TextBox 


MessageChiffre 




Fill 


True 


TextBox 


Messaged air 




Fill 


True 



En plus, configurez le premier controle TextBox pour que les caracteres du mot 
de passe soient remplaces lors de l'affichage, et les deux controles TextBox 
suivants pour qu'ils s'etendent sur trois colonnes. 

Finalement, dans la fenetre Styles de ligne et de colonne du controle Tabl e- 
LayoutPanel , specifiez le redimensionnement automatique pour la premiere et 
la troisieme colonne, et une largeur de 100 % pour la deuxieme. De la meme 
maniere, specifiez le redimensionnement automatique pour la premiere ligne, et 
des valeurs de 50 % pour les deux lignes suivantes. 



EH)® 



Mot de pa Me 



A Figure 3-5 : 

Fenetre de 

dechiffrement 

terminee 



Les deux fenetres de votre interface graphique sont desormais terminees. Vous 
pourrez passer a la realisation de votre application. 



3.3 Realisation 

Votre application a, principalement, deux parties fonctionnelles : 1' envoi de 
messages par courrier electronique et le chiffrement et dechiffrement de ces 
messages. 

Vous allez commencer par gerer le chiffrement, qui requiert la creation d'une 
classe auxiliaire. 
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Classe auxiliaire pour la crypto log ie 

Pour acceder aux fonctions de cryptologie depuis les deux fenetres de votre 
application, sans avoir a recrire plusieurs fois le meme code, vous allez les 
encapsuler dans une classe auxiliaire. 

Ajoutez une nouvelle classe dans votre projet en cliquant du bouton droit sur 
le nom de votre projet et en selectionnant Classe dans le sous-menu Ajouter. 
Appelez votre classe Crypto. 

Votre classe contiendra trois constantes, qui serviront a configurer le chiffre- 
ment et le dechiffrement, ainsi que deux methodes statiques, qui gereront les 
operations proprement dites. 

Const TailleSalt As Integer = 16 
Const TailleCle As Integer = 32 
Const TaillelV As Integer = 16 

▲ Constantes servant a configurer le fonctionnement de la classe Crypto 

Ces trois constantes servent a definir les tailles, en octets, de certains elements 
necessaires aux operations de chiffrement et de dechiffrement : 

■ Le salt est un jeu aleatoire d' octets utilise pour rendre plus difficile le 
decryptage du mot de passe employe pour la creation de la cle de 
chiffrement. 

■ La cle de chiffrement sera celle utilisee pour encoder le message. Elle n'est 
pas egale au mot de passe, car elle doit avoir une longueur precise, mais 
elle est generee a partir de celui-ci. Le fait d'utiliser un salt pour generer 
la cle fait que celle-ci est differente chaque fois qu'elle est generee. II 
faudra communiquer le salt pour permettre la generation de la bonne cle 
lors du dechiffrement. 

■ Le vecteur d' initialisation (IV) est un jeu aleatoire d'octets dont le but est 
de rendre plus difficile le decryptage d'un message chiffre. En effet, 
l'utilisation du IV empeche un bloc de texte brut donne, lorsqu'il apparait 
a plusieurs reprises dans le message a chiffrer, d'etre encode de la meme 
maniere. Cela rend plus difficile l'analyse du texte chiffre. 

Vient ensuite la mefhode de chiffrement : 

Public Shared Function Chiffrer( 
ByRef messaged air As String, ByRef mdp As String) 
As String 

Dim octetsClairQ As Byte = 

Encodi ng . Uni code . GetBytes (messaged ai r) 
Dim octetsMdp As New Rfc2898DeriveBytes(mdp, TailleSalt) 

Dim ms As New MemoryStream 
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Dim algo As New Ri jndaelManaged 
algo.Key = octetsMdp.GetBytes(TailleCle) 
algo. IV = octetsMdp.GetBytes(TaillelV) 

Dim cs As New CryptoStream(ms, algo.CreateEncryptorQ , 

CryptoStreamMode.wri te) 
cs.Write(octetsClair, 0, octetsCl air. Length) 
cs.Close() 

Dim messageChiffre() As Byte = ms.ToArray() 
Dim resultat(octetsMdp. Salt. Length + _ 
messageChiffre. Length - 1) As Byte 

Array. ConstrainedCopy(octetsMdp. Salt, 0, 

resultat, 0, octetsMdp.Salt. Length) 
Array. ConstrainedCopy(messageChiffre, 0, resultat, 

octetsMdp .Salt. Length , messageChi f f re . Length) 

Return Convert .ToBase64Stri ng (resul tat) 

End Function 

▲ Methode de chiffrement 

La methode Chiffrer prend en parametre une chame de caracteres et le mot de 
passe servant a la chiffrer. 

On utilise l'algorithme Rijndael pour chiffrer votre message. Mais tout d'abord, 
on transforme le message a encoder en un tableau d'octets a l'aide de la classe 
Encoding, tandis que la classe Rfc2898Deri veBytes sert a generer un jeu 
d'octets a partir duquel on extraira les octets correspondant a la cle de 
chiffrement et au IV. Le constructeur de cette classe genere en plus un salt de 
la taille indiquee qu'il faudra concatener au message chiffre par la suite. 

Les operations de chiffrement et de dechiffrement sont realisees non pas avec 
des donnees stockees dans des variables, mais avec des flux d'octets. Cette 
particularite permet d'encoder de grandes quantites de donnees et de rediriger 
les octets chiffres vers un fichier ou vers le reseau de maniere efficace. Mais elle 
implique aussi de creer un tel flux. Etant donne que Ton souhaite recuperer le 
message chiffre en memoire pour constituer le message electronique, on doit 
creer un flux en memoire avec la classe MemoryStream. 

On doit ensuite creer un objet representant l'algorithme de chiffrement choisi. 
On utilise la version managee de l'algorithme Rijndael, represente par la classe 
Ri jndaelManaged. Rijndael est un algorithme de chiffrage symetrique, ce qui 
veut dire que la meme cle est utilisee pour le chiffrement et pour le 
dechiffrement des donnees. Comme on genere la cle de chiffrement de maniere 
pseudo-aleatoire en utilisant le mot de passe fourni et un salt, on doit fournir ce 
dernier avec le message chiffre pour generer de nouveau la cle et dechiffrer le 
message. 
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On configure la cle et le vecteur d' initialisation de l'objet Rijndael Managed en 
extrayant des octets de l'objet Rfc2898Deri veBytes avec sa methode GetBytes 
et en les stockant dans les proprietes Key et IV. II est desormais possible de 
chiffrer un message. 

En ce sens, on a besoin d'un flux special, le CryptoStream, que Ton cree en 
specifiant le flux qui recevra le message chiffre, un objet chiffreur cree avec la 
methode CreateEncryptor de l'algorithme et la valeur CryptoStreamMode.wri te 
pour specifier que Ton souhaite ecrire dans le premier parametre. II ne reste 
plus qu'a ecrire le flux d'octets que Ton souhaite chiffrer dans le flux de 
chiffrement a l'aide de sa methode Wri te et de le fermer avec sa methode CI ose, 
une fois l'operation terminee. 

Finalement, on recupere le message chiffre, qui se trouve dans l'objet Memo- 
ryStream, dans un tableau d'octets et Ton prepare un autre tableau d'octets pour 
y stocker le salt et le message chiffre. Comme le salt et le message se trouvent 
deja sous forme de tableaux, on peut utiliser la methode statique Constrained- 
Copy pour copier ces deux valeurs dans le tableau resultat. 

On peut retourner le resultat du chiffrement sous forme de chaine de caracteres 
apres avoir converti le tableau resul tat en utilisant la methode ToBase64Stri ng 
de la classe Convert. Cette conversion assure que, quels que soient les octets 
resultant du chiffrement, ils seront tous representables a l'ecran, dans un fichier 
texte ou encore dans un courrier electronique. 

La procedure de dechiffrement fonctionne a l'inverse du processus que vous 
venez d' implemented 

Public Shared Function Dechiffrer( 
ByRef messageChiffre As String, ByRef mdp As String) 
As String 

Dim message() As Byte = 

Convert . FromBase64Stri ng (messageChi f f re) 
Dim salt(TailleSalt - 1) As Byte 
Dim octetsChiffres( 

message. Length - TailleSalt - 1) As Byte 
Array. ConstrainedCopy (message, 0, salt, 0, TailleSalt) 
Array. ConstrainedCopy (message, TailleSalt, 

octetsChiffres, 0, octetsChiff res. Length) 

Dim octetsMdp As New Rfc2898Deri veBytes (mdp, TailleSalt) 

octetsMdp. Salt = salt 

Dim ms As New MemoryStream 

Dim algo As New Ri jndael Managed 

algo.Key = octetsMdp. GetBytes (TailleCle) 
algo. IV = octetsMdp. GetBytes (TaillelV) 
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Dim cs As New CryptoStream(ms, algo.OeateDecryptor() , 

CryptoStreamMode.wri te) 
cs.Write(octetsChiffres, 0, octetsChiff res. Length) 
cs.CloseQ 

Return Encodi ng . Uni code . GetStri ng (ms . ToArray () ) 

End Function 

▲ Methode de dechiffrement 

On recupere un tableau d'octets a partir d'une chaine de caracteres encodee en 
base 64 et on la separe en deux autres tableaux d'octets pour recuperer le salt 
et le message chiffre. 

On recree ensuite la cle de chiffrage comme on l'a fait pour le chiffrement, et 
Ton prepare un objet Rijndael Managed et un flux MemoryStream pour les 
resultats, et un flux CryptoStream pour l'operation de dechiffrement. Cepen- 
dant, lors de la creation de ce dernier, il faut passer un dechiffreur en tant que 
second parametre grace a la methode CreateDecryptor de l'algorithme. 

Une fois le dechiffrement effectue, on peut recuperer une chaine de caracteres 
grace a la classe Encoding. 

La classe auxiliaire est terminee. 

Envoyer des messages chiffres 

Dans la fenetre principale de votre application, vous avez ajoute deux boutons 
qui permettent d'envoyer des courriers electroniques chiffres ou bruts. 

Vous allez associer un gestionnaire d'evenements a ces deux boutons pour 
permettre a l'utilisateur d'envoyer par courrier electronique le message qu'il a 
saisi, eventuellement chiffre avec le mot de passe s'il le desire. 

Selectionnez les deux boutons en cliquant dessus tout en appuyant sur la touche 
[ Ctrl] , Dans le volet des proprieties, cliquez sur le bouton en forme d'eclair pour 
afficher les evenements des deux boutons. 





Proprietes 


■r ? X 








BackColorChai 




CheckedChani 




CheckStateCh 




Click EnvoyerMessage 


DisplayStyleCI 


Doubleclick 


EnabledChanc 


ForeColorChai 





< Figure 3-B : Creation d'un 
gestionnaire d'evenements Click 
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Saisissez EnvoyerMessage comme nom du gestionnaire d'evenements Click et 
appuyez sur la touche [ Entree] pour creer la methode. 

Private Sub EnvoyerMessage (ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Handles Envoyer.Cl ick, CrypterEnvoyer.Cl ick 
Dim smtp As New SmtpCl ient("smtp. monserveur.com") 
AddHandler smtp.SendCompleted, 
AddressOf Envoyer_SendCompl eted 

Dim message As New MailMessage() 
message. From = New MailAddress(DeTextBox.Text) 
message . To .Add (New Mai 1 Address (ATextBox .Text) ) 
message. Subject = ObjetTextBox.Text 

If sender. Equal s(Envoyer) Then 

message. Body = MessageTextBox.Text 

Else 

message. Body = Crypto. Chiffrer( 
MessageTextBox .Text , MdpTextBox . Text) 
End If 

smtp . SendAsync (message , message . Sub j ect) 
End Sub 

▲ Preparer et envoyer un message electronique 

On cree un client SMTP a l'aide de la classe SmtpCl ient. Le constructeur de 
cette classe a besoin de l'adresse du serveur SMTP pour envoyer des messages. 
On configure un gestionnaire d'evenements SendCompl eted de l'objet cree. II 
permettra de savoir si le message a ete envoye avec succes. 

On cree ensuite un nouvel objet de type Mai 1 Message, qui represente le message 
electronique. On configure cet objet a l'aide des valeurs saisies par l'utilisateur 
dans le formulaire. 

II ne reste plus qu'a decider, en fonction du bouton sur lequel l'utilisateur a 
clique, si le corps du message doit etre chiffre a l'aide de la classe auxiliaire 
Crypto, et a l'envoyer en utilisant la methode SendAsync du client SMTP. Le 
premier parametre fournit au client toutes les informations necessaires pour 
delivrer le message, tandis que le deuxieme n'est la que pour des raisons 
purement informatives. II pourra etre utilise dans le gestionnaire d'evenements 
SendCompl eted. 

Private Sub Envoyer_SendCompleted( - 
ByVal sender As System. Object, 

ByVal e As System. ComponentModel .AsyncCompletedEventArgs) 
If e. Error IsNot Nothing Then 
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Dim messageErreur As New StringBuilder() 
messageErreur. AppendFormat("Erreur lors de 1 'envoi 

du message [{0}]. ", e.UserState.ToStringQ) 
messageErreur. AppendLine(e. Error. Message) 

If (e. Error. InnerException IsNot Nothing) Then 
messageErreur. AppendFormat( "Message : {0}", 
e. Error. InnerException. Message) 

End If 

MessageBox.Show(messageErreur.ToString() , 
"Erreur", MessageBoxButtons.OK, 
MessageBoxIcon . Error) 

Else 

MessageBox.Show("Message envoye !", "Succes", 
MessageBoxButtons.OK, MessageBoxIcon. Information) 
End If 
End Sub 

▲ Gestionnaire d'evenements SendCompleted 

Dans ce gestionnaire, on verifie simplement la presence d'une erreur lors de 
l'envoi du message et Ton affiche des details sur celle-ci. S'il n'y a pas 
d'erreur, on affiche un message informant du succes de l'operation. 

Dechiffrer les messages 

Le deuxieme formulaire permettra de dechiffrer les messages que Ton vous 
aura envoyes en utilisant votre application. Le code que vous devez ecrire pour 
cela est simple. 

Ouvrez le formulaire Dechiffrer et double-cliquez sur le bouton disponible. 
Completez la methode creee comme suit : 

Private Sub Buttonl_Cl ick(ByVal sender As System. Object, 
ByVal e As System. EventArgs) Handles Buttonl. Click 
Try 

TexteCl air. Text = 

Crypto . Dech i f f rer (TexteChi f f re . Text , MotDePasse . Text) 
Catch ex As Exception 

Msgbox("Mot de passe incorrect ou message corrompu !", 
"Erreur", MessageBoxButtons.OK, MessageBoxIcon. Error) 

End Try 
End Sub 

▲ Dechiffrer un message 

On utilise la methode Dechiffrer de la classe auxiliaire pour dechiffrer le texte 
qui se trouve dans le premier champ de texte. Ce code doit se trouver dans un 
bloc Try... Catch, car si le mot de passe fourni est incorrect ou si le texte chiffre 
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a ete altere, une exception sera levee. II faut gerer cette exception pour informer 
l'utilisateur de l'echec. 

Touches finales 

Les deux formulaires sont desormais fonctionnels. Or vous ne pouvez pas 
acceder au deuxieme a partir du formulaire principal. Toutefois, lors de la 
preparation de ce dernier, vous avez prevu des commandes dans les differents 
menus, qui permettent, entre autres, cet acces. II ne reste plus qu'a implementer 
leurs gestionnaires d'evenements en double-cliquant sur chacun des boutons et 
en ecrivant leur code comme suit : 

1 Menu Fichier 

Private Sub NouveauToolStripMenuItem_Click( 
ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Handl es NouveauTool Stri pMenuI tem. CI i ck 

DeTextBox.Text = String. Empty 

ATextBox.Text = String. Empty 

ObjetTextBox.Text = String. Empty 

MdpTextBox.Text = String. Empty 

MessageTextBox.Text = String. Empty 
End Sub 

Private Sub QuitterToolStripMenuItem_Click( 

ByVal sender As System. Object, 

ByVal e As System. EventArgs) 

Handl es Qui tterTool Stri pMenuI tem. CI i ck 
Closet) 
End Sub 

1 Menu Outils 

Private Sub DechiffrerToolStripMenuItem_Click( 
ByVal sender As System. Object, 
ByVal e As System. EventArgs) - 
Handl es Personnal i serTool Stri pMenuI tem. CI i ck 
Dim d As New DechiffrerQ 
d.ShowQ 
End Sub 



▲ Gestionnaires d'evenements des differentes commandes des menus du 
formulaire principal 




La commande Nouveau du menu Fichier servira done a vider tous les champs 
du formulaire principal et la commande Quitter du meme menu servira, 
logiquement, a le fermer. La commande Dechiffrer du menu Outils creera un 
nouveau formulaire de dechiffrement et l'affichera. 

Grace a ces touches finales, votre application est maintenant terminee. 
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3.4 Check-list 

En developpant cette application, vous avez appris a : 

■ utiliser les classes de l'espace de noms System. Net. Mai 1 pour envoyer des 
courriers electroniques ; 

■ utiliser les classes et les methodes de conversion de la plateforme .NET 
pour transformer et encoder des donnees de differentes manieres ; 

■ utiliser les algorithmes de cryptologie proposes par la plateforme, en 
particulier celui de Rijndael, pour securiser l'echange de messages elec- 
troniques ; 

■ encapsuler des fonctionnalites dans une classe auxiliaire pour les rendre 
accessibles a d'autres classes de 1' application. 
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Le but de 1' application que vous allez developper dans ce chapitre est de 
permettre de gerer des donnees sans faire appel a un systeme de gestion de 
bases de donnees (SGBD). 

Grace aux Assistants et aux controles inclus dans Visual Basic 2005 Express, 
vous serez capable de connecter vos objets directement a votre interface 
graphique. Vous pourrez ensuite enregistrer vos donnees en stockant l'etat de 
tous vos objets dans un fichier. 

La transformation des objets en un format qui peut etre stocke ou transporte 
s'appelle "serialisation". Vous allez utiliser les classes fournies par la plate- 
forme .NET qui vous permettront de stacker vos objets sous forme binaire. Les 
classes pour le processus inverse, appele "deserialisation", se trouvent aussi 
dans les bibliotheques .NET. 

Votre application servira a la gestion d'un concours de peche. Elle devra gerer 
l'inscription des participants, la saisie des resultats et l'affichage des classe- 
ments. 

Pour chaque participant, les resultats a enregistrer sont : 

■ la masse totale de poissons peches ; 

■ la masse du plus gros poisson ; 

■ le nombre de poissons. 

Les resultats pourront etre classes soit par genre (hommes et femmes), soit par 
age, avec une categorie "junior" pour les moins de 17 ans. 

4.1 Classes et espaces de noms utilises 

Comme pour toute application Windows, vous allez utiliser des classes de 
l'espace de noms System. Wi ndows . Forms. Vous aurez aussi besoin de classes 
dans les espaces de noms System. 1 0 pour la manipulation de fichiers et de la 
classe BinaryFormatter de l'espace de noms System. Runtime. Serial ization 
.Formatters. Binary, qui se chargera de la serialisation. 

Toutefois, ces classes ne vous seront pas d'une grande utilite si vous ne creez 
pas les classes qui representeront les objets du domaine de votre application. 

Creez un nouveau projet de type Application Windows pour commencer a 
programmer. 

La classe Personne 

Chaque personne inscrite au concours sera caracterisee par un certain nombre 
d'attributs communs. En particulier, elles auront toutes un nom, un prenom, une 
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date de naissance et un genre. Vous allez encapsuler ces informations dans la 
classe Personne. 

Cliquez du bouton droit sur le nom de votre projet et ajoutez la classe Personne 
a l'aide de la commande Classe du sous-menu Ajouter. 

<Serializable()> 
Public Class Personne 

Implements IComparable(Of Personne) 

Public m_nom As String 
Public m_prenom As String 
Public m_dateN As DateTime 
Public m_feminin As Boolean 

Public Sub New(ByVal nom As String, 
ByVal prenom As String, 
ByVal dateNaissance As DateTime, 
ByVal feminin As Boolean) 
Me.mjiom = nom 
Me.m_prenom = prenom 
Me.m_dateN = dateNaissance 
Me.m_feminin = feminin 
End Sub 

Public Property Nom() As String 
Get 

Return m_nom 
End Get 

Set (ByVal value As String) 

m_nom = value 
End Set 
End Property 

Public Property PrenomQ As String 
Get 

Return m_prenom 
End Get 

Set (ByVal value As String) 

m_prenom = value 
End Set 
End Property 

Public Property DateDeNaissanceQ As DateTime 
Get 

Return m_dateN 
End Get 

Set (ByVal value As DateTime) 

m_dateN = value 
End Set 
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End Property 

Public Property Femim'n() As Boolean 
Get 

Return m_feminin 
End Get 

Set(ByVal value As Boolean) 

m_feminin = value 
End Set 
End Property 

Public Readonly Property NomCompl et() As String 
Get 

Return Me.m_nom.ToUpper() + " " + Me.m_prenom 
End Get 
End Property 

Public Readonly Property Age() As Integer 
Get 

Return CInt( _ 
Today. Subtract(Me.m_dateN) .TotalDays / 

365.25)" 

End Get 
End Property 

Public Function CompareTo(ByVal obj As Personne) 
As Integer _ 

Implements IComparable(Of Personne) .CompareTo 
Return Me . NomCompl et . CompareTo (ob j . NomCompl et) 
End Function 

End Class 

▲ La classe Personne 

L'attribut Serial izable, place au debut de la declaration de la classe, est 
necessaire car on va serialiser les donnees des personnes participant au 
concours. 

On ajoute un constructeur a la classe, qui permet d'initialiser tous ses champs 
lors de l'instanciation des objets de type Personne. 

On cree aussi des proprietes pour chacun des champs de la classe. Elles 
permettront d'utiliser automatiquement les objets comme source de donnees 
dans Visual Basic 2005 Express. 

On cree deux proprietes supplementaires en lecture seule : NomCompl et et Age. 
La premiere retourne une chaine de caracteres composee du nom de famille de 
la personne en majuscules, suivi de son prenom ; cette propriete est utile pour 
l'affichage des informations relatives aux participants. La deuxieme propriete 
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calcule l'age des individus et est utilisee pour determiner les membres de la 
categorie "junior". 

Enfin, on implemente une methode CompareTo, puisque Ton va implementer 
l'interface IComparabl e(0f Personne). Parce que Ton utilise une interface 
generique, on n'a pas a se soucier du type du parametre passe a la methode : 
on a defini des la compilation qu'il s'agit d'une Personne. Cette methode sert 
a trier par ordre alphabetique une liste d'instances de la classe Personne. 

La classe Participant 

Vous avez deja encapsule certaines donnees relatives aux personnes participant 
au concours dans la classe Personne. Mais cela ne suffit pas : il faut associer a 
chaque participant ses resultats. Vous allez done creer une classe Participant, 
qui derivera de la classe Personne et contiendra les resultats en plus des 
donnees personnelles de chacun. 

<Serializable()> 
Public Class Participant 
Inherits Personne 

Private m_nbPoissons As Integer 
Private mjnasseTotalePoisson As Single 
Private mjnassePlusGrosPoisson As Single 

Public Sub New(ByVal nom As String, 
ByVal prenom As String, 
ByVal dateNaissance As DateTime, 
ByVal feminin As Boolean) 
MyBase.New(nom, prenom, dateNaissance, feminin) 
Me.NombrePoissons = 0 
Me.MassePlusGrosPoisson = 0 
Me.MasseTotalePoisson = 0 
End Sub 

Public Property NombrePoissonsQ As Integer 
Get 

Return Me.m_nbPoissons 
End Get 

Set (ByVal value As Integer) 
Me.mjibPoissons = value 
End Set 
End Property 

Public Property MasseTotalePoissonQ As Single 
Get 

Return Me.mjnasseTotalePoisson 
End Get 
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Set(ByVal value As Single) 

Me.mjnasseTotalePoisson = value 
End Set 
End Property 

Public Property MassePlusGrosPoisson() As Single 
Get 

Return Me.mjnassePlusGrosPoisson 
End Get 

Set(ByVal value As Single) 

Me.mjnassePlusGrosPoisson = value 
End Set 
End Property 
End Class 

▲ La classe Participant 

Tout comme la classe Personne, la classe Participant doit avoir l'attribut 
Serial izable pour qu'il soit possible de stacker son etat dans un fichier par la 
suite. Bien que cette classe n'implemente pas l'interface IComparabl e, ses 
instances peuvent etre comparees entre elles grace a 1' implementation de sa 
classe de base. 

Ici on cree un constructeur qui permettra d' initialiser les donnees personnelles 
de chaque participant en appelant le constructeur de la classe de base a l'aide 
de MyBase.New. 

On doit, une fois de plus, creer des proprietes pour acceder aux champs de la 
classe, afin que celle-ci puisse etre utilisee comme source de donnees par la 
suite. 



4.2 Interface utilisateur 

Maintenant que vous avez cree les classes representant les donnees que 
manipulera votre application, il ne vous reste plus qu'a creer l'interface 
graphique de celle-ci. 

Les nouveaux Assistants et controles presents dans Visual Basic 2005 Express 
vous faciliteront la tache. 

Definition de la source de donnees 

Commencez par generer la solution a l'aide de la commande Generer du menu 
de meme nom. Cela a pour effet de compiler les types que vous avez crees 
precedemment et de les rendre visibles aux Assistants de Visual Basic 2005 
Express. 
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Affichez maintenant le volet Sources de donnees en cliquant sur la commande 
Afficher les sources de donnees dans le menu Donnees. Aucune source de 
donnees n'est associee au projet pour 1' instant. Cliquez sur le lien Ajouter une 
nouvelle source de donnees pour en creer une. 



Sources de donnees 



Aucune source de donnees n'est 
actuellement associee a votre 
projet. Ajoute2 une nouvelle 
source de donnees, puis liez les 
elements en les faisant glisser de 
cette fenetre sur les formulaires ou 
les controles existants. 

Ajouter une nouvelle source de 
donnees... 



A Figure 4-1 : Le volet Sources de 
donnees est vide 



Sources de donnees 
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IS Age 
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<4 Figure 4-2 : La source de donnees 
Participant 



Dans 1' Assistant qui se lance, selectionnez le choix Objet et cliquez sur Suivant. 



Assistant Configuration de s 



t 



Choisir un type de source de donnees 



A partir d'ou Implication obtiendra - t-elle les donnees ? 



J 


It. 


I 


Base de 


Service Web 




donnees 






Permet de choisir 


n objet qui ser 


a susceptible d'etre utilise pour generer les controles lies auv donnees. 



r 



▲ Figure 4-3 : Assistant de Configuration de source de donnees 
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Maintenant, selectionnez le type d'objet que vous souhaitez utiliser en tant 
que source de donnees. Developpez l'arborescence pour trouver le type 
Participant et cliquez sur Terminer. 



Assistant Configuration de source de donnees 



Selectionner I'objet que vous souhaitez lier 



I Ajouter une reference.. 



Dans quel assembly I'objet est-il situe ? (Si I'objet ne s'affkhe pas, annulez I'Assistant et 
regenerez le projet contenant I'objet) 

- ~ Concours 
d {} Concours 
| <fy Forml 

; ^ Personne 
:±J {} Concours, My 



PI Masquer les assembJys qui commencent par Microsoft ou System 

[ < Precedent | | Suivant > ] | Terminer | | Annuler 



▲ Figure 4-4 : Choix de I'objet a lier 

Maintenant que vous avez defini votre source de donnees, la creation de votre 
formulaire sera presque un jeu d'enfants. 



Creation du formulaire 

Commencez par deposer un controle de type Tool Strip dans votre formulaire 
et utilisez la fleche de balise active de celui-ci pour inserer des elements 
standard. 



[ " Forml . □ X 




LEJ3 


laches ToolStrip 




Incorporer dans ToolStripContainer 
:r r :p'p' lies eleven's stand .aid 


RenderMode ManagerRenderMode 

Dock [Top v 

GripStyle [ Visible v 


Modifier les elements,.. 


1 



A Figure 4-5 : Inserer des elements standard dans la barre d'outils 
Vous allez supprimer tous les elements, sauf les boutons Ouvrir et Enregistrer. 
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> Creation de barres d'outils et de menus 

Visual Basic 2005 Express propose un certain nombre d'elements standard, 
aussi bien pour les Tool Strip que pour les MenuStrip que vous pouvez inserer 
a I'aide des fleches de balise active des controles. 

Vous etes libre de creer vos barres de menus et d'outils manuellement si vous 
le souhaitez. Mais les elements standard inseres par Visual Basic 2005 
Express sont, pour la plupart, deja configures, avec les images et raccourcis 
clavier. II ne vous reste plus qu'a supprimer ceux dont vous n'avez pas besoin. , 



Vous allez maintenant diviser votre application en trois parties fonctionnelles : 
la gestion des inscriptions, l'enregistrement des resultats et l'affichage des 
classements. Pour cela, inserez un controle TabControl dans votre formulaire et 
reglez sa propriete Dock sur Fill. 

Par defaut, le controle sera cree avec deux onglets. Ajoutez le troisieme en 
cliquant sur la fleche de balise active et en choisissant Ajouter un onglet. 



Forml 


1 

_ n x 


I -/ A 


1 

IS 


TabPage! TabPage2 





Supprimer I'onglet 



< Figure 4-6 : 

Ajouter un nouvel 
onglet 



Utilisez la propriete TabPages du TabControl pour afficher l'Editeur de 
collections TabPage. Servez-vous de l'Editeur pour saisir les valeurs 
Inscription, Resultats et Classements dans la propriete Text de chaque onglet 
(voir Figure 4-7). 

Maintenant, ajoutez les champs qui vous permettront de realiser les inscrip- 
tions. Pour cela, glissez les champs Nom, Prenom, Feminin et DateDeNaissance a 
partir du volet Sources de donnees vers votre formulaire. Pour chacun d'entre 
eux, un Label et un controle permettant la saisie des donnees sont ajoutes au 
formulaire. 
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TabPagei 
TabPage2 



s 
s 



Proprietes TabPage3 : 



Ajouter | [ Supprimer ] 



AccessibleDescrip 
AccessibleName 
AccessibleRole Default 
□ Apparence 

BackColor Transparent 
Backgroundlmage | | (aucun) 
Backgroundlmage Tile 
Bender Style None 
Default 

Microsoft Sans Serif; 
| ControlText 
No 

Classementsl 




Annuler 



▲ Figure 4-7 : Editeur de collections TabPage 

Les controles Parti ci pantBi ndi ngSource et Parti ci pantBi ndi ngNavi gator sont 
apparus dans la zone des controles non affichables. II s'agit de deux controles 
qui permettront l'affichage et la navigation d'un jeu de donnees. Selectionnez 
le controle Parti ci pantBi ndi ngNavi gator. Coupez-le pour le retirer du haut du 
formulaire et collez-le sous l'onglet Inscription. II viendra se placer vers le haut 
de celui-ci. Changez sa propriete Dock a Bottom afin qu'il se place en bas de 
l'onglet. 



Li a 



Inscription Resultats Classements 

Nom: | 

Prenorn: 



Feminin: O 

Date de Naissance : vendredi 3 septembre 1 982 



i H i. 



fern * n t? a 



< Figure 4-8 

Inscription 



□nglet 



66 • Le guide du codeur 



Interface utilisateur 



Selectionnez maintenant le deuxieme onglet. Vous allez y ajouter un controle 
ComboBox, qui servira a selectionner le participant pour saisir ses resultats. Pour 
lier ce controle a la source de donnees, utilisez la fleche de balise active et 
cochez la case Utilisez des elements lies aux donnees. Selectionnez Parti ci- 
pantBindingSource comme Source de donnees et choisissez d'afficher le 
membre NomComplet. 



[ * Forml 


- n|Jx 




itia 




Inscription Resultats Classernents 






Taches ComboBox 


9 d 


0 Utilisez des elements lies aux donnees 
Mode Liaison de donnees 

Source de donnees ParticipantBindingSource v 
Afficher le membre NomComplet v 
Membre Value v 
Valeur selectionnee (aucun) v 









▲ Figure 4-9 : Liaison d'un controle ComboBox a une source de donnees 

Vous pourriez ajouter les champs correspondant aux resultats de chaque 
participant, comme vous l'avez fait sous 1' onglet precedent. Mais si vous 
procedez ainsi, les champs inseres seront de type TextBox et personne ne peut 
garantir que les valeurs saisies seront des nombres, comme le requiert le type 
Participant. 

Cliquez done sur un champ tel que NombrePoi ssons dans le volet Sources de 
donnees et selectionnez la commande Personnaliser du menu qui s'affiche 
lorsque vous cliquez sur le bouton fleche situe a cote du champ. Verifiez, dans 
la fenetre qui s'ouvre, que le controle de type Numeri cUpDown est coche. Faites 
cette operation pour les trois champs qui concernent les resultats. 

Desormais, vous pouvez utiliser le bouton fleche qui se trouve a cote de chaque 
champ dans le volet Sources de donnees pour selectionner le type Numeri cU- 
pDown a affecter aux champs de resultats. Glissez les trois champs qui 
concernent les resultats des participants. 
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Inscription Resultats Classements 



Nombre de poissons : 
Masse totale des poissons 




Masse du plus gros poisson : 0,000 



< Figure 4-1 0 : 

Onglet Resultats 



Modifiez la propriete Decimal PI aces des champs relatifs aux masses des 
poissons pour pouvoir inserer des chiffres apres la virgule. 

Enfin, sous le troisieme onglet, ajoutez un controle DataGridView. Decochez les 
options d'ajout, de modification et de suppression dans la balise active, car ce 
controle servira seulement a afficher des donnees. Une fois le controle 
DataGridView en place, vous pouvez modifier sa propriete Anchor pour "ancrer" 
ses cotes aux bords de son conteneur afin qu'il soit redimensionne avec celui-ci. 

Inserez maintenant deux controles GroupBox et des boutons radio. 



.J A 



Inscfiption Resultats Classements 




Categories Classement 

O Toutes O General 

( ) Hommes (_ j Femmes : Nombte de poissons 

O Junior O Plus gros poisson 



< Figure 4-1 1 : 

Onglet Classements 



Votre interface est maintenant terminee. II ne reste que peu de code a ecrire 
pour assurer le fonctionnement de 1' application. 
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4.3 Realisation 

La gestion des donnees est faite par les controles Parti cipantBindingSource et 
Parti cipantBindingNavi gator, par 1' intermediate des controles lies et de la 
barre d'outils du BindingNavi gator. Cependant, votre application n'est pas 
capable, telle qu'elle est, de charger et d'enregistrer des donnees. 

Chargement et enregistrement des donnees 

La classe Participant n'ayant pas de constructeur par defaut, le controle 
Parti cipantBindingSource n'est pas capable par lui-meme de creer de nouvel- 
les instances. Verifiez que la propriete Al 1 owNew de la source est a True et creez 
le gestionnaire d'evenements AddingNew du controle. 

Private Sub Parti cipantBindingSource_AddingNew( 
ByVal sender As System. Object, - 
ByVal e As System. ComponentModel .AddingNewEventArgs) 
Handl es Parti ci pantBi ndi ngSource . Addi ngNew 
e.NewObject = New Parti ci pant (Me. NomTextBox. Text, 
Me . PrenomTextBox . Text , 
Me. DateNaissanceDateTimePicker. Value, 
Me. FemininCheckBox. Checked) 
End Sub 

▲ Gestionnaire d'evenements AddingNew 

Desormais, vous pouvez gerer les evenements des boutons Ouvrir et Enregistrer 
de la barre d'outils pour enregistrer et charger des listes de participants 
serialisees. Double-cliquez sur les boutons pour creer leurs gestionnaires 
d'evenements. 

Private Sub OuvrirToolStripButton_Click( 
ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Handl es Ouvri rTool Stri pButton .Click 
Dim Formatter As New 

Runtime. Serial izati on. Formatters. Binary. Binary Formatter 
Dim ofd As New OpenFileDialog 
ofd. Initial Directory = 
My . Computer . Fi 1 eSystem. Speci al Di rectori es .MyDocuments 

If ofd.ShowDialog(Me) = DialogResult.OK Then 
Dim fs As New IO.FileStream(ofd.FileName, 
IO.FileMode.Open) 

Try 

Me. Parti ci pantBi ndi ngSource. DataSource = 
CType( Formatter. Deserial ize(fs) , 
ILi st(0f Participant)) 
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Catch ex As Exception 

MessageBox.Show("La recuperation a echouee : " 
+ vbCrLf + ex. Message, "Erreur", 
MessageBoxButtons.OK, MessageBoxIcon. Error) 
Finally 

fs.Close() 
End Try 
End If 
End Sub 

Private Sub EnregistrerToolStripButton_Click( 
ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Handl es Enregi strerTool Stri pButton .Click 
Dim Formatter As New _ 

Runtime. Serial izati on. Formatters. Binary. Binary Formatter 
Dim sfd As New SaveFileDialog 
sfd. Initial Directory = 
My .Computer. Fi 1 eSystem.Speci al Di rectori es .MyDocuments 

If sfd.ShowDialog(Me) = DialogResult.OK Then 
Dim fs As New IO.FileStream(sfd.FileName, 
10. FileMode. Create) 

Try 

Formatter. Serial ize(fs, 
Me . Parti ci pantBi ndi ngSource .List) 
Catch ex As Exception 

MessageBox.Show("La sauvegarde a echoue : " 
+ vbCrLf + ex. Message, "Erreur", 
MessageBoxButtons.OK, MessageBoxIcon. Error) 
Final ly 

fs.Close() 
End Try 
End If 
End Sub 

▲ Serialisation et deserialisation de la liste de participants 

Dans chacun des gestionnaires d'evenements, on cree un ESinaryFormatter qui 
sera charge de realiser la serialisation et la deserialisation. 

Dans le gestionnaire du bouton Ouvrir, on utilise un OpenFi 1 eDi al og pour 
recuperer le nom du fichier, tandis que, dans celui du bouton Enregistrer, on 
utilise un SaveFileDialog. 

On emploie les methodes Serialize et Deserialize du BinaryFormatter que 
Ton a cree pour serialiser et deserialiser la liste de participants accessible par 
la propriete List de l'objet Parti ci pantBi ndi ngSource. 
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Classement des resultats 

Pour finir, vous allez creer le gestionnaire d'evenements des boutons radio du 
troisieme onglet, qui permettra l'affichage des resultats classes dans le controle 
DataGridView. 

Avant de creer le gestionnaire d'evenements des controles RadioButton, vous 
devez implementer des classes auxiliaires dans la classe Participant pour 
permettre la comparaison des resultats des participants. 

Public Class ComparerParNombrePoissons 
Implements IComparer(Of Participant) 

Public Function Compare (ByVal x As Participant, 
ByVal y As Participant) As Integer 
Implements IComparer(Of Participant) .Compare 
Return x.NombrePoissons.CompareTo(y.NombrePoissons) 
End Function 
End Class 



Public Class ComparerParMasseTotalePoisson 
Implements IComparer(Of Participant) 

Public Function Compare (ByVal x As Participant, 
ByVal y As Participant) As Integer 
Implements IComparer(Of Participant) .Compare 
Return x.MasseTotalePoisson.CompareTo( 
y.MasseTotalePoisson) 
End Function 
End Class 



Public Class ComparerParMassePlusGrosPoisson 
Implements IComparer(Of Participant) 

Public Function Compare (ByVal x As Participant, 
ByVal y As Participant) As Integer 
Implements IComparer(Of Participant) .Compare 
Return x.MassePlusGrosPoisson.CompareTo( 
y.MassePlusGrosPoisson) 
End Function 
End Class 

A Classes internes de la classe Participant 

L'utilisation d'interfaces generiques IComparer(Of T) evite la conversion 
inutile des donnees et facilite la lecture des methodes. 

Selectionnez maintenant tous les controles RadioButton en cliquant dessus en 
maintenant la touche ( Ctrl ) enfoncee. Saisissez Classement_Click comme valeur 
de l'evenement Click dans le volet des proprietes et appuyez sur la touche 
[Entree] pour creer le gestionnaire. 
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Private Sub Classement_Cl ick( 
ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Handles optGros. Click, optNombre. Click, 
optGeneral .CI ick, optJunior. Click, optFemmes. Click, 
optHommes.Cl ick, optTous. Click 

Dim ClassementConcours As New List (Of Participant) 

If Not optTous. Checked Then 

Dim participant As Participant 
For Each participant In 
Me . Parti ci pantBi ndi ngSource . Li st 
If optJunior. Checked AndAlso 
participant. Age < 17 Then 
CI assementConcours . Add (parti ci pant) 
El self Me. optHommes. Checked AndAlso 
parti ci pant. Feminin = False Then 
CI assementConcours .Add (parti ci pant) 
El self Me. optFemmes. Checked AndAlso 
participant. Feminin Then 
CI assementConcours .Add (parti ci pant) 
End If 

Next 

Else 

CI assementConcours. AddRange( 
Me . Parti ci pantBi ndi ngSource . Li st) 

End If 

If Me.DataGridViewl.DataSource IsNot Nothing Then 

Me.DataGridViewl.DataSource = Nothing 
End If 

Select Case True 
Case Me. optGeneral .Checked 
CI assementConcours . Sort ( 

New Part i ci pant . ComparerParMasseTotal ePoi sson) 
With Me.DataGridViewl 
.DataSource = ClassementConcours 
.Columns("NomComplet") .Displaylndex = 0 
.Col umns("MasseTotalePoi sson") .Visible = True 
.Col umns("MasseTotalePoi sson") .Displaylndex = 1 
.Col umns("MassePlusGrosPoi sson") .Visible = True 
.Col umns("MassePlusGrosPoi sson") .Displaylndex = 2 
.Columns("NombrePoissons") .Visible = True 
.Columns("NombrePoissons") .Displaylndex = 3 
End With 

Case Me. optGros. Checked 
CI assementConcours . Sort ( 
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New Part i ci pant . ComparerParMassePl usGrosPoi sson) 
With Me.DataGridViewl 

.DataSource = ClassementConcours 

.Columns("NomComplet") .Displaylndex = 0 

.Col umns("MassePlusGrosPoi sson") .Displaylndex = 1 

.Col umns("MasseTotalePoi sson") .Visible = False 

.Columns("NombrePoissons") .Visible = False 
End With 

Case Me. optNombre. Checked 
ClassementConcours. Sort ( 

New Parti ci pant . ComparerParNombrePoi ssons) 
With Me.DataGridViewl 

.DataSource = ClassementConcours 

.Columns("NomComplet") .Displaylndex = 0 

.Columns("NombrePoissons") .Displaylndex = 1 

.Col umns("MasseTotalePoi sson") .Visible = False 

.Col umns("MassePlusGrosPoi sson") .Visible = False 
End With 

End Select 

With Me.DataGridViewl 

.Col umns("Age") . Visible = False 

.Columns("DateDeNaissance"). Visible = False 

.Col umns("Feminin") .Visible = False 

.Col umns("Nom") . Visible = False 

.Col umns("Prenom") .Visible = False 
End With 
End Sub 

A Methode pour le classement 

Cette methode verifie quel est le bouton radio du groupe Categories qui est 
coche et genere une liste temporaire de type List (Of Participant) en vue d'un 
affichage dans le controle DataGridView. Si la case Tous est cochee, tous les 
elements stockes dans la liste du controle Parti cipantBindingSource seront 
ajoutes a la liste temporaire ; sinon, une selection sera faite. 

Enfin, en fonction du bouton radio du groupe Classement qui sera coche, une 
instance des classes internes de la classe Participant sera creee pour que la 
liste temporaire soit triee grace a sa methode Sort. 

Toutes les fonctionnalites de votre application sont desormais implementees. 
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4.4 Check-list 

En developpant cette application, vous avez appris a : 

■ creer des classes serialisables et stacker des collections de celles-ci dans 
un fichier ; 

■ utiliser Visual Basic 2005 Express pour creer des sources de donnees a 
partir d'objets ; 

■ creer des interfaces graphiques liees a des sources de donnees ; 

■ implementer des interfaces pour permettre la comparaison de classes 
personnalisees. 
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Vous allez creer, dans ce chapitre, une application qui vous permettra d'editer 
des fichiers au format RTF (Rich Text Format, en francais "format de texte 
enrichi"). 

RTF est frequemment utilise pour l'echange de donnees formatees aussi bien 
entre programmes qu'entre plateformes, car il est reconnu par beaucoup 
d' applications et, plus particulierement, par les logiciels de traitement de texte 
des differents systemes d' exploitation. 

L'application que vous allez creer aura une interface multidocument (MDI), qui 
permettra d'ouvrir, simultanement, au sein d'un meme formulaire, dit "parent", 
plusieurs sous-formulaires, dits "enfants". 

Adobe Photoshop est un exemple d'application MDI, tout comme Microsoft 
Visual Basic 2005 Express Edition, qui utilise des onglets par defaut, mais qui 
peut etre converti en application MDI grace a la commande Options du menu 
Outils. 



5.1 Classes et espaces de noms utilises 

Comme pour toute application Windows, vous aurez besoin de Tespace de 
noms System. Windows. Forms. 

Dans cet espace de noms, vous trouverez la classe RichTextBox, qui sera le 
cceur de votre outil de traitement de texte. 

Pensez aussi a importer Tespace de noms System. IO, qui vous servira pour 
certaines manipulations de fichiers. 

5.2 Interface utilisateur 

Une grande partie de votre interface graphique est deja prete. Vous allez 
comprendre pourquoi. 

Formulaire principal 

Vous allez commencer par creer le formulaire principal (celui qui hebergera les 
formulaires enfants) de votre application dans un nouveau projet. 

1 Creez une nouvelle application Windows appelee RTFEditor. 

2 Dans l'Explorateur de solutions, supprimez le fichier Forml.vb en cliquant 
sur celui-ci du bouton droit et en selectionnant la commande Supprimer. 

3 Pour creer la fenetre principale de votre application, cliquez du bouton 
droit sur le nom de votre projet dans l'Explorateur de solutions et 
selectionnez la commande Nouvel element du sous-menu Ajouter. 
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Ajouter un nouvel element - RTFEditor 



Interface utilisateur 



ran 



Modeles Visual Studio installes 



m ji 

Windows Form Boite de 
dialogue 

Classe Module 



Formulaire Formulaire 
Explorateur parent MDI 



Boite de 
dialogu... 



Formulaire de Eaan de 
connexion demarrage 



J 



DataSet Base de Controle Fichier texte 

donnees SQL utilisateur 



Formulaire squelette pour une applicabon d'interface multidoajment 



FenetrePrindpalel vb 



| Ajouter | | Annuler~ 



▲ Figure 5-1 : Ajouter un nouveau formulaire parent MDI 

4 Dans l'Assistant, selectionnez le modele Formulaire parent MDI et, dans la 
zone de texte Nom, saisissez FenetrePrincipale.vb. Si vous cliquez sur le 
bouton Ajouter, Visual Studio cree une fenetre complete, avec les menus 
et les barres d'outils les plus utilises, et prete a recevoir des formulaires 
enfants. 



FenetrePrincipale 



Q@|x| 




A Figure 5-2 : Fenetre principale 
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^arque 

^ Vos propres conteneurs MDI 

Le modele de formulaire MDI propose par Visual Studio peut vous faire gagner 
du temps, car, en quelques dies, vous obtenez un formulaire avec menus et 
barres d'outils, pret a I'emploi. 

Toutefois, vous n'etes pas oblige d'utiliser ce modele. En effet, tout formulaire 
est susceptible de devenir un conteneur MDI. II suffit pour cela de changer la 
valeur de sa propriete IsMdi Container a True. Vous remarquerez que sa 
bordure et sa couleur de fond changent, signalant qu'il est pret a accueillir des 
formulaires enfants. 



Le bouton Aide a ete supprime de la barre d'outils ainsi que les deux boutons 
qui concernent l'impression. Les menus Aide et Outils, et les commandes du 
menu Fichier qui concernent l'impression ont aussi ete supprimes, car ces 
fonctionnalites ne seront pas implementees. 

Vous devez ajouter trois boutons a la barre d'outils : 

■ GaucheToolStripButton ; 

■ CentreToolStripButton ; 

■ DroiteToolStripButton. 



< Figure 5-3 : Barre d'outils de la 
fenetre principale 



Le formulaire principal de votre application est pret a recevoir les formulaires 
enfants que vous allez preparer dans la section suivante. 



Formulaires enfants 

Maintenant que le formulaire principal est pret, vous devez creer une nouvelle 
classe qui representera les formulaires enfants : ceux qui vous permettront 
d'editer vos documents RTF. 

1 Pour cela, ajoutez un nouvel element a votre projet, comme vous l'avez 
fait pour le formulaire principal. Choisissez, toutefois, Windows Form 
comme modele et appelez-le DocumentRtf.vb. 

2 Inserez maintenant un controle Ri chTextBox en double-cliquant sur celui-ci 
dans la bolte a outils. 

3 Cliquez sur la fleche de balise active dans le coin superieur droit du 
controle que vous venez d'inserer. 
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Cliquez sur Ancrer dans le conteneur parent pour attribuer a la propriete 
Dock la valeur Fill. Le controle RichTextBox s'ancre aux limites du 
formulaire DocumentRtf. 



GiD ProgressBar 
0 RadioButton 



RichTextBox 



abl TextBox 

ToolTip 
tf_ TreeView 
r J WebBrowser 
- Conteneurs 
1^ Pointeur 



Figure 5-4 

Inserer un 
RichTextBox 



L" DocumentRtf 



laches RichTextBox 

Modifier les lignes de texte 
Ancrer dans le conteneur parent 



Figure 5-5 : 

Ancrer le 
RichTextBox au 
conteneur parent 



5 Dans la propriete (name) du controle RichTextBox, saisissez RichTextBox. 

Votre formulaire d' edition est termine. Ce formulaire, et plus particulierement 
le controle RichTextBox qu'il contient, seront utilises dans le formulaire 
principal pour editer un ou plusieurs documents RTF simultanement. 



j DocumentRtf 



QUI® 



Figure 5-6 : 

Formulaire d'edition 
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Definition du formulaire de demarrage 

Les differents elements de votre interface graphique sont prets. Toutefois, si 
vous essayez de compiler et de lancer l'application, vous allez vous retrouver 
avec une erreur du compilateur. Cela est du au fait que le formulaire par defaut, 
Forml.vb, a ete supprime. Vous devez done specifier, manuellement, le 
formulaire de demarrage de votre application. 

1 Dans l'Explorateur de solutions, cliquez du bouton droit sur le nom de 
votre projet et selectionnez Proprietes. 

2 Sous l'onglet Application, selectionnez FenetrePrincipale dans la liste 
deroulante Formulaire de demarrage. 





Application 111 


Nom de I'assembly : 


Espace de noms racine : 








Compiler 


|RTFEditor 


| |RTFE(ftor 


1 


Deboguer 


Type d'application : 


Icone : 






Application Windows 


V (Icone par defaut) 




References 


Formulaire de demarrage : 






Ressources 


FenetrePrincipale 


v | Informations de I'assembly... 




Parametres 


PI Activer I'infrastructure de l'application 







A Figure 5-7 : Modifier le formulaire de demarrage de l'application 



3 Fermez l'onglet a l'aide de la croix. 

Votre interface graphique est maintenant prete. II ne reste plus qu'a implemen- 
ter les fonctionnalites de base d'un outil de traitement de texte. Au prealable, 
vous pouvez la tester en appuyant sur la touche (F5) de votre clavier. 

5.3 Realisation 

Visual Studio a prepare votre formulaire principal avec des elements graphiques 
qui donnent Faeces a la plupart des fonctionnalites proposees par un outil de 
traitement de texte. Vous en avez ajoute d'autres lors de la preparation de 
celui-ci. Toutefois, ces fonctionnalites ne sont toujours pas implementees. 

Le modele de formulaire MDI a deja cree certains gestionnaires d'evenements 
pour vous, par exemple celui qui permet de creer de nouveaux sous-formulaires 
a l'interieur de la fenetre principale ou encore celui qui affiche une boite de 
dialogue pour ouvrir un document. Cependant, vous devez les modifier pour 
qu'ils correspondent exactement a vos besoins. 
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Completer la classe DocumentRtf 

Au niveau de l'interface graphique, la classe DocumentRtf est prete, mais vous 
devez encore ecrire un peu de code afin de l'utiliser par la suite. 

Affichez le code de la classe DocumentRtf en cliquant du bouton droit sur le 
fichier de meme nom dans l'Explorateur de solutions et en selectionnant la 
commande Afficher le code. 



Explorateur de solutions 



S RTFEditor 

j^J My Project 

jj* Ouvrir 



['ixumerii.prf .vb 



_jj Afficher le code 




Concepteur de vues 




Couper 


-J 


Copier 


X 


Supprimer 




Renommer 


a 


Proprietes 



Figure 5-8 : Afficher le code de la 
classe DocumentRtf 



Ecrivez le mot Property et appuyez sur la touche [Tab] de votre clavier. Cela a 
pour effet d'inserer un extrait de code correspondant a une propriete publique 
et son membre prive associe. Remplacez les noms et les types inseres par defaut 
pour obtenir le code suivant : 

Private mjiomDuFichier As String = String. Empty 

Public Property NomDuFichier() As String 
Get 

Return mjiomDuFichier 
End Get 

Set(ByVal value As String) 
mjiomDuFichier = value 
End Set 
End Property 



Ce champ et cette propriete serviront a identifier les differents documents 
ouverts dans votre application, ce qui permettra, par exemple, de n' ouvrir 
qu'une seule instance d'un document a la fois. 

Vous pouvez fermer le code source et le Concepteur de vues du fichier 
DocumentRtf. vb car il n'a plus besoin d'etre modifie. 
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Creer de nouveaux documents 

Si vous testez votre interface graphique, vous pouvez constater que le bouton 
Nouveau de la barre d'outils et la commande Nouveau du menu Fichier vous 
permettent deja de creer de nouvelles fenetres a l'interieur du formulaire 
principal de votre application. Toutefois, ces fenetres ne sont que de simples 
instances de la classe Form, sans fonctionnalite supplementaire. 

Vous devez modifier la methode ShowNewForm pour ouvrir de nouvelles fenetres 
DocumentRtf dans votre application. Double-cliquez sur le bouton Nouveau de 
la barre d'outils afin d'acceder au code source de la methode ShowNewFrom. 
Modifiez la declaration de la variable Chi Id Form comme suit : 

Private Sub ShowNewForm(ByVal sender As Object, 
ByVal e As EventArgs) 
Handles NewToolStripMenuItem. Click, 
NewTool Stri pButton . CI i ck , 
NewWi ndowTool Stri pMenuItem. CI i ck 
1 Creez une nouvelle instance du formulaire enfant. 
Dim ChildForm As New DocumentRtf 
1 Configurez-la en tant qu 1 enfant de ce formulaire MDI 
1 avant de 1 'afficher. 
ChildForm. MdiParent = Me 
m_ChildFormNumber += 1 

Chi ldForm. Text = "Fenetre " & m_ChildFormNumber 
Chi ldForm.Show() 
End Sub 

A Creation d'un nouveau formulaire 

Les nouveaux formulaires enfants seront de type DocumentRtf. 

La methode definit ensuite le formulaire courant, Me, comme parent MDI du 
formulaire que vous venez de creer en utilisant la propriete MdiParent de 
celui-ci, et incremente un compteur qui contient le nombre de nouveaux 
enfants. Le titre du nouveau formulaire est ensuite modifie et celui-ci est 
affiche. 

Ouvrir un document existant 

Comme pour la commande Nouveau, il existe deja un gestionnaire d'evene- 
ments qui est appele lorsque Ton clique sur le bouton Ouvrir ou lorsque Ton 
selectionne la commande Ouvrir du menu Fichier. La methode s'appelle 
OpenFile et elle est capable d' afficher une boite de dialogue permettant de 
selectionner un fichier a ouvrir et de recuperer le nom de ce fichier dans une 
variable. Mais c'est a vous de l'etendre pour qu'un nouveau formulaire de type 
DocumentRtf soit ouvert et affiche effectivement le fichier selectionne. 
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Toutefois, avant d'ouvrir le fichier demande, vous allez d'abord verifier qu'il 
n'est pas deja ouvert afin d'eviter d'afficher le meme document plusieurs fois. 
Pour cela, vous allez creer une fonction privee au sein de la classe Fenetre- 
Principale. 

Private Function RechercherDocument(ByRef nom As String) 
As DocumentRtf 
For Each Document As DocumentRtf In Mdi Children 
If Document. NomDuFichier. Equals (nom) Then 

Return Document 
End If 

Next 

Return Nothing 
End Function 

▲ Recherche d'un document ouvert 

Cette fonction prend une chaine de caracteres en parametre, qui correspond au 
nom complet du fichier que Ton souhaite ouvrir. On parcourt la collection de 
formulaires enfants de la fenetre principale, Mdi Children, tout en verifiant si 
leur propriete NomDuFichier est egale au nom demande. Si c'est le cas, le 
document correspondant est renvoye. Si Ton arrive a la fin de la collection sans 
trouver le nom demande, la valeur Nothing est renvoyee. 

Vous pouvez a present modifier la methode OpenFi 1 e afin d'ouvrir le document 
souhaite ou ramener sa fenetre vers le front s'il est deja ouvert. 

Private Sub OpenFi le(ByVal sender As Object, 
ByVal e As Event Args) 
Handles OpenToolStripMenuItem.Cl ick, 
OpenTool Stri pButton .Click 
Dim OpenFi leDialog As New OpenFi leDialog 
OpenFi leDialog. Initial Directory = 

My .Computer. Fi 1 eSystem. Speci al Di rectori es .MyDocuments 
OpenFi leDialog. Filter = 

"Fichiers RTF (*.rtf) |*.rtf |Tous les fichiers (*.*)|*.*" 

If (OpenFi leDialog.ShowDialog (Me) = 

System. Wi ndows . Forms .Dial ogResul t . OK) Then 

Dim FileName As String = OpenFi leDialog.FileName 

Dim ChildForm As DocumentRtf = 

RechercherDocument (Fi 1 eName) 
If ChildForm IsNot Nothing Then 
Chi 1 dForm. Bri ngToFront () 

Else 

ChildForm = New DocumentRtf 

Chi 1 dForm. Ri chTextBox. LoadFi 1 e(Fi 1 eName) 

ChildForm. Mdi Parent = Me 

ChildForm. Text = Path.GetFileName(FileName) 

ChildForm. NomDuFichier = FileName 
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ChildForm.Show() 
End If 
End If 
End Sub 

▲ Ouverture d'un fichier RTF 

On commence par preparer une nouvelle boite de dialogue de type OpenFile- 
Di al og pour selectionner le fichier a ouvrir. On doit modifier le filtre utilise dans 
cette boite de dialogue afin qu'elle affiche les fichiers *.rtf. La boite de dialogue 
est ensuite affichee et, si l'utilisateur la valide grace au bouton OK ou a la 
touche | Entree | , on recupere le nom du fichier selectionne dans la variable 
FileName. 

On doit ensuite creer une variable appelee ChildForm a laquelle on affectera le 
resultat de la recherche du document souhaite parmi ceux qui sont deja ouverts. 
Si le document demande est deja ouvert, la variable ChildForm contiendra une 
reference vers la fenetre qui le contient, ce qui permettra de la ramener vers le 
front plus tard, sinon elle contiendra la valeur Nothing. 

On teste si la recherche a abouti. Si c'est le cas, il suffit d'appeler la methode 
Bri ngToFront pour amener le document souhaite par-dessus les autres docu- 
ments ouverts. Sinon, on stocke dans la variable Chi Id From une nouvelle 
instance de la classe DocumentRtf et Ton definit le formulaire courant en tant 
que son parent MDI, grace a sa propriete Mdi Parent. On accede ensuite au 
controle Ri chTextBox du nouveau formulaire en utilisant la propriete de meme 
nom et Ton appelle sa methode LoadFile en passant le nom du fichier en 
argument pour le charger. On utilise ensuite la methode statique GetFi 1 eName de 
la classe Path pour extraire le nom du fichier et l'utiliser comme titre de la 
nouvelle fenetre que Ton affichera par la suite. II faut stacker le nom du fichier, 
qui se trouve dans la variable FileName, dans la propriete NomDuFichier du 
document, car il permettra d'identifier le document si jamais on essaye de le 
rouvrir. II permettra aussi d'enregistrer le document sans avoir a redemander 
l'emplacement de celui-ci a l'utilisateur. 

Vous pouvez a present tester votre application en ouvrant un fichier RTF cree 
avec une autre application, telle que Microsoft Word ou WordPad. 

Enregistrer un document 

Lorsque l'utilisateur veut enregistrer un document, il faut considerer trois cas 
possibles : 

■ L'utilisateur souhaite enregistrer un nouveau document et il clique sur la 
commande Enregistrer du menu Fichier ou sur le bouton Enregistrer de la 

barre d'outils. 

■ L'utilisateur clique sur la commande Enregistrer sous du menu Fichier. 
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■ L'utilisateur clique sur la commande Enregistrer du menu Fichier ou sur 
le bouton Enregistrer de la barre d'outils pour enregistrer un fichier qui 
existe deja. 

Dans les deux premiers cas, une boite de dialogue s'ouvre permettant a 
l'utilisateur de choisir le nom sous lequel il souhaite enregistrer le document. 
Dans le troisieme cas, cela n'est pas necessaire, car l'emplacement du fichier 
est connu. 

Vous allez gerer les deux premiers cas ensemble en vous servant du gestion- 
naire d'evenements SaveAsToolStripMenuItem_Cl ick. II a deja ete cree par le 
modele que vous avez utilise en concevant votre formulaire principal. Comme 
pour le gestionnaire de la commande Ouvrir, vous devez completer cette 
methode afin d'indiquer ce qui devra etre enregistre. 

Private Sub SaveAsToolStripMenuItem_Click( 
ByVal sender As Object, ByVal e As EventArgs) 
Handl es SaveAsTool Stri pMenuItem. CI i ck 
If ActiveMdiChild IsNot Nothing Then 
Dim SaveFileDialog As New SaveFileDialog 
SaveFileDialog.InitialDirectory = 
My . Computer . Fi 1 eSystem. Speci al Di rectori es .MyDocuments 
SaveFileDialog. Filter = 

"Fichiers RTF (*.rtf) |*.rtf |Tous les fichiers (*.*)|*.*" 

If (SaveFileDialog.ShowDialog(Me) = 

System. Wi ndows . Forms . Di al ogResul t . OK) Then 
Dim FileName As String = SaveFileDialog. FileName 
Dim FenetreActive As DocumentRtf = ActiveMdiChild 
FenetreActi ve . Ri chTextBox . SaveFi 1 e (Fi 1 eName) 
FenetreActive. Text = Path.GetFileName(FileName) 
End If 
End If 
End Sub 

▲ Enregistrer un document RTF dans un nouveau fichier 

L'utilisateur ne peut pas enregistrer de fichier s'il n'a pas ouvert de document. 
Pour cette raison, on commence par entourer le code existant par une clause If... 
Else qui teste l'existence d'un formulaire enfant en verifiant que la propriete 
ActiveMdiChild contient une valeur. 

Comme pour la commande Ouvrir, on prepare une boite de dialogue, de type 
SaveFileDialog cette fois, pour recuperer le nom du fichier. On doit aussi 
modifier le filtre de cette boite de dialogue pour afficher des fichiers de type .rtf. 

Si l'utilisateur valide sa selection, le nom du fichier est stocke dans une variable 
appelee FileName. On doit alors creer une autre variable appelee FenetreActive 
de type DocumentRtf qui reference le formulaire enfant actif, que Ton recupere 
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grace a la propriete ActiveMdiChild. On procede ainsi pour acceder a la 
RichTextBox du DocumentRtf. 

II ne reste plus qu'a appeler la methode SaveFile du controle RichTextBox de 
la fenetre active, en lui passant le nom du fichier contenu dans la variable 
Fi 1 eName, pour que celui-ci soit enregistre. On met ensuite a jour le titre de la 
fenetre active pour refleter le nouveau nom du document. 

Le troisieme cas est plus rapide a ecrire. 

Double-cliquez sur le bouton Enregistrer du menu Fichier de votre fenetre 
principale dans le Concepteur de vues et completez le gestionnaire d'evene- 
ments qui est cree. 

Private Sub SaveTool Stri pMenuItem_Click(ByVal sender As 

System. Object, 

ByVal e As System. EventArgs) 
Handles SaveToolStripMenuItem.Cl ick, 
SaveTool Stri pButton .Click 
If ActiveMdiChild IsNot Nothing Then 

Dim FenetreActive As DocumentRtf = ActiveMdiChild 

If String. IsNul lOrEmpty(FenetreActive.NomDuFichier) Then 

SaveAsTool Stri pMenuItem. PerformCl i ck() 
Else 

FenetreActi ve. Ri chTextBox . SaveFi 1 e (FenetreActi ve . NomDuFi chi er) 
End If 
End If 
End Sub 

▲ Enregistrer le nom du fichier 

Une fois de plus, on doit verifier qu'il y a bien un document a enregistrer en 
s'assurant qu'il y a un formulaire enfant actif. Si c'est le cas, on stocke une 
reference vers la fenetre active dans une variable FenetreActive. 

Al'aide de la methode IsNotNul lOrEmpty de la classe String, on verifie la 
propriete NomDuFi chi er du document a enregistrer. Si la methode retourne True, 
cela veut dire qu'il s'agit d'un nouveau document pour lequel il faut demander 
un nom. Mais comme cette fonctionnalite a deja ete programmed pour la 
commande Enregistrer sous, il ne reste plus qu'a simuler un clic sur celle-ci en 
utilisant la methode PerformCl ick. Dans le cas contraire, on appelle la methode 
SaveFi 1 e du controle Ri chTextBox de la fenetre active en lui passant la propriete 
NomDuFi chi er comme emplacement pour sauvegarder le fichier. 

Afin d'attacher ce gestionnaire d'evenements a la commande Enregistrer du 
menu Fichier, cliquez sur celle-ci puis sur le bouton en forme d' eclair dans le 
volet des proprietes pour afficher les evenements disponibles. Cliquez sur 
l'evenement Click puis sur le bouton fleche pour selectionner la methode 
SaveTool Stri pMenuItem_Cl ick dans la liste. 

86 • Le guide du codeur 



Realisation 







Proprietes ▼ ^ 


X 


& 




SaveToolStripMenuItem System 




i n 




mm «0J , 






BackColorChai 




LJ 




CheckedCham 








CheckStateCh 




c 




| MenuItem_Click 


V 


5 




ExitTools5tripMenuItern_Click 

CutTool5tripMenuItern_Click 

CopyToolStripMenuItem_Click 

PasteTool5tripMenuItem_Click 

ToolBarToolStripMenuItem_Click 

5tatusBarTool5tripMenuItem_Click 

CascadeTool5tripMenuItem_Click 

TileVertideTool5tripMenuItem_Click 

TileHorizontalToolStripMenuItem_Click 

ArrangeIcon5ToolStripMenuItem_Click 

CloseAIIToolSttipMenuItem_Click 


■ 


xJ 

U"l 

™ 

o 
3 
5 

■■■ 




SaveTool5tripMenuItem_Click 








>; 








MouseMove 








M ' 







Figure 5-9 : 

Associer la methode a 
I'evenement Click 



Maintenant que vous avez implements' l'ouverture et l'enregistrement de 
fichiers, vous pouvez utiliser votre application pour creer de nouveaux fichiers 
RTF et editer des fichiers crees par d'autres applications. 

Menu Edition 

Le modele de formulaire parent que vous utilisez contient un menu Edition avec 
des commandes proposees par la plupart des applications Windows. Ces 
commandes, qui font souvent penser a des manipulations de piles ou a la 
gestion des differents types de donnees dans le Presse-papiers, sont gerees par 
la classe Ri chTextBox. 

Les gestionnaires d'evenements des six commandes seront virtuellement iden- 
tiques, sauf pour la commande qui est appelee sur la Ri chTextBox. lis 
respecteront tous le modele suivant : 

If ActiveMdiChild IsNot Nothing Then 

Dim FenetreActive As DocumentRtf = ActiveMdiChild 
FenetreActive.Ri chTextBox. [Commande a Executer] 

End If 

A Modele de code des commandes du menu Edition 

Pour creer chacun des gestionnaires, double-cliquez sur la commande que vous 
souhaitez implementer et copiez ce modele en remplacant le texte entre 
crochets par l'appel a la methode appropriee. 
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Ainsi, pour la commande Annuler, la methode a appeler est Undo et le 
gestionnaire d'evenements ressemblera a ceci : 

Private Sub UndoTool Stri pMeniiItem_Cl i ck(ByVal sender As 

System. Object, 

ByVal e As System. EventArgs) 
Handl es UndoTool Stri pMenuItem. CI i ck 
If ActiveMdiChild IsNot Nothing Then 

Dim FenetreActive As DocumentRtf = ActiveMdiChild 
FenetreActi ve . Ri chTextBox. Undo () 
End If 
End Sub 

▲ Gestionnaire de la commande Annuler 



Le tableau suivant indique les methodes a appeler pour chacune des six 
commande s : 



Methodes du controle RichTextBox correspondent aux commandes du menu 
Edition 


Commande 


Methode 


Annuler 


Undo() 


Retablir 


Redo() 


Couper 


Cut() 


Copier 


Copy() 


Coller 


Paste() 


Selectionner tout 


SelectAll () 



Aligner le texte 

Pour le moment, vous n'avez fait qu'implementer des comportements pour les 
elements de l'interface que Visual Studio a preparee pour vous. Or, lorsque 
vous avez cree la fenetre principale de votre application, vous avez ajoute trois 
boutons a la barre d'outils permettant d'aligner horizontalement le texte du 
document. 

Comme pour les commandes precedentes, ce ne sera pas a vous d'aligner 
directement le texte. Vous allez simplement modifier une propriete du controle 
RichTextBox de la fenetre active pour changer l'alignement du texte selec- 
tionne. Cependant, le code pour chacun des trois boutons etant quasiment 
identique, vous allez creer un seul gestionnaire d'evenements que vous 
associerez aux trois boutons en question et qui determinera automatiquement 
l'alignement a appliquer en fonction du bouton sur lequel l'utilisateur aura 
clique. 
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Commencez par ecrire le gestionnaire d'evenements pour les trois boutons : 

Private Sub AlignerSelection(ByVal sender As Object, 

ByVal e As EventArgs) 
If ActiveMdiChild IsNot Nothing Then 

Dim FenetreActive As DocumentRtf = ActiveMdiChild 
Dim NouvelAl ignement As Horizontal Al ignment 

If sender. Equal s(GaucheToolStripButton) Then 

NouvelAl ignement = Horizontal Alignment. Left 
El self sender. Equal s(CentreToolStripButton) Then 

NouvelAl ignement = Horizontal Al ignment. Center 
El self sender. Equal s(DroiteToolStripButton) Then 

NouvelAl ignement = Horizontal Al ignment. Right 
End If 

FenetreActive. RichTextBox.SelectionAlignment = 
NouvelAl ignement 

End If 
End Sub 

▲ Aligner la selection 

II faut verifier qu'un document est ouvert avant de faire une quelconque 
modification. 

Si un document est bien ouvert, on procede a la creation de deux variables, 
FenetreActive et NouvelAl ignement, qui contiendront respectivement une re- 
ference vers la fenetre active, de type DocumentRtf, pour recuperer son controle 
RichTextBox, et l'alignement souhaite, de type Horizontal Al ignment. 

La suite de clauses If... Else permet d'affecter une valeur de l'enumeration 
Horizontal Al ignment a la variable NouvelAl ignement en fonction du bouton qui 
a declenche l'evenement. Cette valeur est ensuite affectee a la propriete 
SelectionAl ignement du controle RichTextBox de la fenetre active. 

Revenez dans le Concepteur de vues afin d'associer le gestionnaire d'evene- 
ments que vous venez de creer aux trois boutons. Pour ce faire : 

1 Selectionnez les trois boutons en cliquant sur le premier puis sur les deux 
autres tout en maintenant la touche [ Ctrl ] enfoncee. 

2 Cliquez sur le bouton en forme d' eclair dans le volet des proprietes pour 
afficher les evenements disponibles pour les trois boutons. 

3 Cliquez sur l'evenement CI ick puis sur le bouton ffeche pour selectionner 
la methode AlignerSelection dans la liste. 

Votre application est desormais un outil de traitement de texte RTF a part 
entiere. Certes, toutes les possibilites de formatage offertes par RTF ne sont pas 
exploiters, mais si vous le souhaitez, vous pouvez facilement etendre votre 
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application en suivant les modeles de code que vous avez deja ecrits et en 
modifiant d'autres proprietes du controle RichTextBox, par exemple la propriete 
SelectionColor, qui permet de changer la couleur du texte selectionne. 

5.4 Check-list 

Dans ce chapitre vous avez appris a : 

■ utiliser les modeles fournis par Visual Basic 2005 Express Edition afin 
d'accelerer le developpement de vos applications ; 

■ gerer plusieurs formulaires enfants dans une interface multidocument ; 

■ executer des commandes sur les formulaires enfants d'une application 
MDI a partir des controles du formulaire parent ; 

■ editer un document au format de texte enrichi grace au controle 
RichTextBox. 
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Les sites web personnels, qui permettent de creer un espace virtuel sur Internet, 
sont a la mode depuis quelques annees. Vous allez creer le voire tout au long 
de ce chapitre pour vous presenter, presenter vos activites, votre CV, etc. 



6.1 Creation de I'interface 

Commencez par creer votre projet web. 

Pour cela, ouvrez Visual Web Developer 2005 Express et creez un nouveau 
projet via le menu Fichier. 

Une boite de dialogue s'affiche, permettant de creer differents types duplica- 
tions web. Selectionnez le modele de projet intitule Site Web vide. Verifiez que 
le langage selectionne est le Visual Basic, nommez et placez le projet web ou 
vous le souhaitez puis validez. 



Nouveau site Web 



JLJxJ 



Modeles Visual Studio installes 



It ft «@ 



Site Web Service Web Starter Kit de Ma'JfliWBIS Site Web 
ASP.NET ASP.NET site Web p.. . ASP.NET Crys.. 



Rechercher des 
modeles en li , . . 



| Site Web vide 
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w 1 Parcourir... | 


Langage : 


| Visual Basic 







▲ Figure 6-1 : Modeles de projets web 

Votre projet web est maintenant cree. II est vide car il ne contient aucun fichier. 
L'Explorateur de solutions en rend compte. 

Vous allez creer une page maitre, c'est-a-dire un modele de page a appliquer a 
un ensemble de pages web. Vous pouvez, par exemple, creer un modele 
contenant I'interface commune a toutes les pages web d'un site, et le leur 
appliquer. Elles ne contiendront des lors que le contenu variable. 
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Pour creer une page maitre, cliquez sur le menu Site Web et selectionnez 
Ajouter un nouvel element. Dans la boite de dialogue, selectionnez l'element 
Page maitre. 



Ajouter un nouvel element - D:\Lrv 



Modeles Visual Studio installed 



Classe 
d'applicati... 



DataSet 



Fichier de 
configurati... 



Gestionnaire 



Controle 
utilisateur Web 



Fichier XML 



Page HTM. 







a 


Service Web 


Classe 




Fichier texte 


m 

Fichier de 
ressources 


J 

Base de 
donnees 5QL 


^ 




m 


Web Form 
Mobile 


Rapport 


Rapport Crystal 



Page maitre poor applications Web 
Npm : 

Langage : I Visual Basic 



MasterPage. master 



•w | W Placer le code dans un fichier distinct 

I 5electionner la page maitre 



J 



A Figure 6-2 : Creation d'une page maitre 

Apres validation, le designer de Visual Web Developer affiche une page vierge 
blanche, qui contient un controle special : ContentPl aceHol der. 

La page nouvellement creee ne sera pas accessible en tant que telle. Elle devra 
etre utilisee par d'autres. Dans son code source, figurent, a la place de la 
directive Page, une directive Master, et un peu plus bas, le controle Content- 
Pi aceHol der. 



<%@ Master Language="VB" CodeFile= "MasterPage. master. vb" 
Inherits="MasterPage" %> 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional //EN" 

"http://www.w3.org/TR/xhtml 1/DTD/xhtml 1-transitional .dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml " > 
<head runat="server"> 

<title>Page sans titre</title> 
</head> 
<body> 

<form id="forml" runat="server"> 
<div> 

<asp:contentplaceholder id="ContentPl aceHol derl" 
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runat="server"> 

</asp : contentpl acehol der> 
</div> 
</form> 
</body> 
</html> 

L'objectif a present est de definir dans la page maitre l'interface qui sera 
commune a toutes les pages web. Celles-ci seront automatiquement affichees 
dans le controle ContentPl aceHol der. 

Vous allez creer un tableau contenant une seule ligne et deux colonnes. La 
premiere colonne permettra de placer le menu du site web, la seconde colonne 
contiendra le controle ContentPl aceHol der. 

Vous devez arriver a un resultat proche de celui-ci : 

<tabl e><tr><td>menu</td><td><asp : contentpl acehol der 
id="ContentPl aceHol derl" runat="server"> 
</asp : contentpl acehol derx/tdx/trx/tabl e> 



6.2 Creation de menus 

ASP .NET propose deux controles serveurs pour afficher les menus de sites 
web. Le premier est Menu, disponible dans la categorie Navigation dans la boite 
a outils. II permet de creer des menus horizontaux et verticaux, et il est 
entierement personnalisable via l'utilisation de styles CSS, d'images, etc. 

Le second controle disponible pour la creation de menus est TreeView. II permet 
d' afficher des donnees de maniere hierarchique (ce qui est ideal pour un menu 
de site web), verticalement uniquement. Comme le controle Menu, il est 
personnalisable. 

Selectionnez done le controle TreeView dans la boite a outils et placez-le dans 
la premiere cellule du tableau precedemment cree. 



■ Validation 




1 - Navigation 
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Figure 6-3 : Le controle TreeView 
dans la boite a outils 
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Vous allez a present definir l'apparence de ce controle. Pour ce faire, cliquez sur 
le smart tag lie a votre controle TreeView puis sur le lien Mise en forme 
automatique. 
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Figure 6-4 : 

Affichage du smart 
tag du TreeView 



Un clic sur ce lien ouvre une boite de dialogue permettant de selectionner 
differents types de mises en forme predefinies. Vous pouvez ainsi donner une 
apparence professionnelle a votre controle TreeView de maniere rapide. Selec- 
tionnez le theme Fleches, sobre et elegant. 

Maintenant que le controle TreeView est dispose sur votre page maitre et que 
son apparence est definie, il faut le remplir avec les informations concernant les 
differentes pages de votre site. 

II ne s'agit pas de remplir le controle TreeView "en dur" en ajoutant les 
differents elements grace a sa propriete Nodes. Vous allez creer un nouveau 
fichier de type "sitemap" dans votre projet. 

Ajoutez un nouvel element a votre projet et selectionnez Plan de site. Une fois 
la creation validee, vous disposez d'un fichier de type "sitemap", qui est en fait 
un simple fichier XML, avec un schema particulier. II permet de definir la 
hierarchie d'un site web en ajoutant et en organisant des balises siteMapNode. 



<?xml version="1.0" encoding="utf-8" ?> 




<siteMap xmlns= 




"http : //schemas .mi crosof t . com/AspNet/Si teMap-Fi 1 e-1 


0"> 


<siteMapNode url="" ti tl e=" " description=""> 




<siteMapNode url="" title="" description=" 


" /> 


<siteMapNode url="" title="" description=" 


" /> 


</siteMapNode> 




</si teMap> 





Apres avoir personnalise ce fichier, vous devez arriver a un resultat proche de 
celui-ci : 



<?xml version="1.0" encoding="utf-8" ?> 
<siteMap xmlns= 

" http : //schemas .mi crosof t . com/AspNet/Si teMap-Fi 1 e-1 . 0" > 
<siteMapNode url = "default. aspx" 
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title="Mon Site web personnel" description=""> 
<siteMapNode url ="cv.aspx" ti tl e="CV" ></siteMapNode> 
<siteMapNode url="links.aspx" title="Liens preferes" 
description^'" /> 

<siteMapNode url ="Contact.aspx" title="Contact" 
description^'" /> 
</siteMapNode> 
</siteMap> 

Maintenant que le fichier est rempli, il faut le lier au controle TreeView. Le 
controle SiteMapDataSource est dedie a cela. Vous allez l'utiliser pour remplir 
le controle TreeView avec les informations presentes dans le fichier "sitemap". 

En ce sens, placez un controle SiteMapDataSource sur votre page maitre et 
cliquez sur le smart tag du controle TreeView pour le lier au controle 
Si teMapDataSource grace a la liste deroulante Choisirla source de donnees. Une 
fois la source de donnees selectionnee, le resultat final de votre menu apparait 
en mode Conception dans le designer de Visual Web Developer. 



Ajouter un nouvel element - D:\Livres\VB 2005 CPE\Site Web Perso\ 



_?Jx| 



Modeles Visual Studio installes 



n 



Web Form Page maitre Controle Page HTML Service Web Classe Feuiile de style 

urjlisateur Web 



Classe Fichier de Fichier XML Schema XML Fichier texte Fichier de Base de 

d'applicati . . . configurai . . . ressources donnees SQL 



J 

ase de 
nees S 



DataSet Gesbonnaire Plan de site Fichier VBScript Web Form Rapport Rapport Crystal 

genehque Mobile 



Formulaire pour les applications Web 


torn : | Contact, aspx 






Langage : ) Visual Basic 


■v [ R Placer le code dans un fichier distinct 
W Selecrjonner la page maitre 



Ajouter | Annuler 



▲ Figure 6-5 : Selection de la source de donnees du controle TreeView 



6.3 Gestion des liens 

Les sites personnels proposent couramment de consulter une liste de liens 

favoris que l'auteur du site affectionne. Vous allez mettre en place cette 

fonctionnalite sur votre site personnel. Pour gerer cette liste de liens, vous 
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devez implementer plusieurs fonctions : l'affichage de la liste en question, sa 
sauvegarde et son chargement. 

Serialisation XML 

Une liste de liens contient generalement peu de liens, une cinquantaine 
maximum. Pour les gerer, nul besoin de base de donnees. Un simple fichier fera 
l'affaire, en l'occurrence un fichier XML genere automatiquement grace a un 
mecanisme appele "serialisation". La serialisation permet de sauvegarder un 
objet, plus precisement de le faire persister a un instant t et de le recharger plus 
tard, par exemple lors d'une utilisation ulterieure de l'application. Le Fra- 
mework .NET propose deux types de serialisations : la serialisation binaire, qui 
stocke 1' information dans un fichier binaire et done non lisible avec un editeur 
de texte, et la serialisation XML, qui permet de generer un fichier XML 
contenant l'objet serialise. 

Creez une classe Lien qui permettra de representer et de stocker un lien en 
memoire. 

Pour cela, affichez le menu contextuel du projet et selectionnez 1' element 
Ajouter une nouvelle classe. Nommez cette classe 1 ien, et creez deux proprie- 
tes renvoyant des objets de type String : Nom et Url. Elles serviront d'accesseur 
aux champs prives correspondants. Vous devez arriver a un resultat proche de 
celui-ci : 



Public Class Lien 




Private m nom 


As String = String. Empty 


Private m url 


As String = String. Empty 


Public Property Nom() As String 


Get 




Return 


m nom 


End Get 




Set(ByVal 


value As String) 


m nom 


= value 


End Set 




End Property 




Public Property URL() As String 


Get 




Return 


m url 


End Get 




Set(ByVal 


value As String) 


m url 


= value 


End Set 




End Property 




End Class 
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Comme vous souhaitez gerer une liste de liens, et non pas un lien unique, creez 
une nouvelle classe que vous nommerez Liens. Elle contiendra une propriete 
Liens qui renvoie une liste de Lien. 

Public Class Liens 

Private Shared m_liens As List (Of Lien) 

Public Shared Property LiensQ As Li st (Of Lien) 
Get 

If m_liens Is Nothing Then 

m_liens = ChargerLiensQ 
End If 

Return mjiens 
End Get 

Set(ByVal value As List (Of Lien)) 

mjiens = value 
End Set 
End Property 
End Class 

Maintenant que vous pouvez stacker en memoire une liste de liens, sauvegardez 
cette liste via le mecanisme de serialisation XML. 

Pour ce faire, vous devez utiliser trois espaces de noms : System. 10 pour les 
objets lies a la manipulation de fichiers, System. Xml pour les objets lies a la 
manipulation de documents XML, et System. Xml .Serial izat ion pour les objets 
dedies a la serialisation XML. La serialisation se fait a l'aide d'un objet 
Xml Serial izer. Cet objet devant ecrire dans un fichier, il est necessaire de le 
lier a un autre objet dote de cette capacite d'ecriture, tel que TextWriter, qui 
permet d'ecrire des documents de type texte : 

Public Shared Sub SauverLiensQ 
Dim ser As Xml Serial izer = 
New XmlSerializer(GetType(List(Of Lien))) 
Dim writer As TextWriter = 
New StreamWriter("l inks. xml ") 
ser. Serial ize(writer, mjiens) 
writer. Close() 

End Sub 

II ne reste plus qu'a mettre en place la deserialisation de l'objet pour charger 
la liste de liens sauvegardee. Ce mecanisme inverse de la serialisation se fait de 
maniere analogue, si ce n'est que, au lieu d'utiliser un TextWriter pour ecrire 
un fichier, il faut utiliser un objet TextReader pour le lire : 
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Public Shared Function ChargerLiens() As Li st(0f Lien) 

Dim returnLiens As List (Of Lien) = 

New Li st (Of Lien) 

Dim deser As XmlSerializer = 

New XmlSerializer(GetType(List(Of Lien))) 

Dim reader As TextReader 

reader = New StreamReader("links.xml ") 

returnLiens = deser. Deserial ize(reader) 

reader. Close() 

Return returnLiens 
End Function 

Affichage des liens 

Ajoutez une nouvelle page Links. aspx, qui contiendra les controles necessaires 
a la gestion des liens. Pour ce faire, affichez le menu contextuel du projet et 
cliquez sur Ajouter un nouvel element. Dans la boite de dialogue qui s'ouvre, 
nommez votre fichier Links.aspx. Verifiez que la case a cocher Selectionner la 
page maitre est cochee. Cela vous permettra de selectionner la page maitre que 
vous avez creee precedemment. 

Pour afficher la liste de liens, vous allez utiliser un controle source de donnees 
qui permet de remplir des controles d' affichage avec une liste ou une collection 
d'objets. Ce controle non visuel s'appelle ObjectDataSource. II permet d'affi- 
cher des donnees venant d'une liste d'objets directement dans un controle 
d'affichage tel que GridView. II a besoin au minimum d'une methode lui 
renvoyant cette liste d'objets. 

Vous devez done ajouter dans la classe Liens une methode qui renvoie la liste 
de Lien : 

Public Shared Function GetLiensQ As List (Of Lien) 

Return Liens 
End Function 

Cela fait, placez sur votre formulaire le controle ObjectDataSource. II s'affiche 
sous la forme d'un rectangle gris, non visible a l'execution de la page. 

Affichez le smart tag lie au controle et cliquez sur le lien Configurer la source 
de donnees. 

Un nouvel Assistant apparait, permettant de selectionner la classe utilisee. 
Decochez la case Afficher uniquement les composants, et selectionnez la classe 
Liens creee precedemment. 

Cliquez sur le bouton Suivant pour passer a la prochaine etape. Vous devez 
selectionner les methodes de la classe Liens qui seront appelees par le controle 
ObjectDataSource lorsque l'utilisateur souhaitera afficher les donnees (onglet 



Le guide du codeur • 99 



Site web personnel 

v 



Select), les modifier (onglet Update), les inserer (onglet Insert) ou encore les 
supprimer (onglet Delete). 



r2> 



marque 



Classe ou methode absente de la liste 

Lors de la selection de la classe Liens ou de la methode GetLiens dans 
I'Assistant de configuration du controle ObjectDataSource, la classe ou la 
methode risque d'etre absente de la liste. Si tel est le cas, recompilez 
I'application, par exemple a I'aide de la combinaison de touches fctiT|+fMaIl+fBl, et 
relancez I'Assistant. 



L'affichage des donnees est votre unique objectif pour le moment. Sous l'onglet 
Select, selectionnez la methode GetLiens que vous venez d'ajouter a la classe 
Liens. 

Cliquez sur le bouton Finish pour valider. Vous avez a present configure le 
controle d'acces aux donnees, ObjectDataSource. II ne reste plus qu'a afficher 
les donnees. 

Pour cela, placez un controle GridView sur votre formulaire. Ensuite, cliquez 
sur son smart tag puis, dans la liste deroulante Choisir la source de donnees, 
selectionnez le controle ObjectDataSource que vous avez ajoute a la page web. 
Des la selection de la source de donnees, Visual Web Developer modifie 
l'affichage du controle GridView et affiche automatiquement deux colonnes, une 
pour le nom du lien et une autre pour son URL. 

Ces colonnes ne conviennent pas. En effet, il serait plus pratique de presenter 
aux visiteurs une seule colonne, avec des liens ayant comme texte le nom du 
lien et comme URL la propriete Url de l'objet Lien. 

Pour arriver a ce resultat, cliquez sur le smart tag du controle, puis sur le lien 
Modifier les colonnes. Une boite de dialogue s' affiche permettant de manipuler 
les differentes colonnes du GridView. Supprimez les colonnes existantes a I'aide 
du bouton ayant une croix rouge comme icone, et creez-en une nouvelle de type 
HyperLinkField. Ce type de colonne permet de creer une liste de liens. 
Definissez le texte affiche en en-tete de la colonne grace a la propriete 
HeaderText. Definissez les donnees qui vont etre affichees grace a deux 
proprietes : DataNavigateUrl Fields et DataTextField. La premiere permet 
d'indiquer le champ utilise pour definir le lien, c'est-a-dire l'URL vers laquelle 
le lien va pointer. Definissez sa valeur a Url puisqu'il s'agit du nom de la 
propriete de la classe Lien qu'il faut utiliser. Concernant la propriete DataText- 
Field, definissez sa valeur a Nom puisqu'il s'agit du nom de la propriete de la 
classe Lien qui contient le nom du lien. 
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Ajout des liens 

La procedure d'ajout de liens est assez triviale a realiser. Ajoutez deux 
controles TextBox a la page web, un pour la saisie du nom et un second pour 
la saisie de l'URL, ainsi qu'un bouton. 

Dans l'evenement Click du bouton, ajoutez le lien a la collection de liens 
presente en memoire, puis rafraichissez l'affichage du controle GridView : 

Protected Sub Buttonl_Click(ByVal sender As Object,_ 
ByVal e As System. EventArgs) Handles Buttonl.Cl ick 
Dim nouveauLien As Lien = New Lien 
nouveauLien.Nom = txtUrl.Text 
nouveauLien. URL = txtNom.Text 

Li ens . Li ens .Add (nouveauLi en) 
GridViewl.DataBind() 
Liens. SauverLiens() 
End Sub 

Enregistrez, puis compilez et affichez le resultat grace a la touche |F5| . 



6.4 Page Contact 



Passons a present a la page Contact. Elle permettre a votre visiteur de prendre 
contact avec vous grace a l'envoi d'un courrier electronique. 

Pour creer cette page Contact, utilisez la commande Ajouter un nouvel element 

et ajoutez une WebForm. Verifiez que le langage selectionne est Visual Basic 
et que la case Selectionner la page maitre est cochee. 



Modeles Visual Studio installed 



m n m i g i a 

Web Form Page maitre Controle Page html Service web Classe Feuille de style 
utilisateur Web 

m m i m i s j 

Classe Fichier de Fichier XML Schema XML Fichier texte Fichier de Base de 

d'applicati. . . configurati. . . ressources donnees SQL 

i i i i rf i s 

DataSet Gestionnaire Plan de site Fichier VBScript Web Form Rapport Rapport Crystal 

genenque Mobile T | 



| Formulaire pour les applications Web 



Nom : | Contact^ aspx 

Langage ; | Visual Basic 



t| W Placer le code dans un fichier distinct 
[7 Selecbonner la page maitre 



▲ Figure 6-6 : Ajout d'une page web 
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Validez. Selectionnez la page maitre creee precedemment pour l'appliquer a 
votre page Contact. 

Ajoutez trois TextBox dans votre page Contact. aspx, la premiere ayant un ID 
egal a txtNom, la deuxieme un ID egal a txtMail, et la derniere un ID egal a 
txtMessage. Modifiez egalement la propriete TextMode de cette derniere TextBox 
pour definir sa valeur a Multiline. 

Ajoutez quelques controles Label pour decrire les differents champs de saisie, 
ainsi qu'un bouton permettant d'envoyer le message. 



▼ Mon Site Web Personnel 


J 33 

Content - Contentl (Personnaiise) 


JJlU 


?Tom : f 




rVenom : P 


^•lessase : 


B 


J 








"Envoyer J 



▲ Figure 6-7 : Interface de la page Contact 



II faut a present ecrire un peu de code pour que le visiteur puisse envoyer son 
e-mail lorsqu'il clique sur le bouton Envoyer. 

Les objets lies a l'envoi d'e-mails se situent dans l'espace de noms System- 
. Net. Mail. II est done utile d'ecrire un Imports System. Net. Mai 1 en debut de 
classe pour acceder directement a tous ces objets. 

Ecrivez le code suivant dans l'evenement Click du bouton Envoyer: 

Protected Sub btnEnvoyer_Cl ick(ByVal sender As Object, _ 
ByVal e As System. EventArgs) Handles btnEnvoyer.Cl ick 
Dim mail As New MailMessageQ 
mai 1 . From = 

New MailAddress("adressemail@fai .fr", "Contact") 

mail .To.Add(New Mail Address ("monadressemail@monfai .fr")) 

mail. Body = "Mail envoye par " & txtNom. Text & vbCrLf 
mail. Body &= "Adresse mail : " & txtMail. Text & vbCrLf 
mail. Body &= "Message :" & vbCrLf 
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mail. Body &= txtMessage.Text 

Dim smtp As New SmtpClient 
smtp.Host = "smtp.wanadoo.fr" 
smtp. Credential s = 

New Net.NetworkCredential ("userName", "password") 
smtp. Send (mail) 'envoi du message 

End Sub 

L'application est a present terminee. II ne vous reste plus qu'a creer une page 
contenant votre CV par exemple, pour completer le site web. 

6.5 Check-list 

Dans ce chapitre, vous avez appris a : 

■ utiliser une page maitre au sein de votre site web personnel ; 

■ creer un menu grace a un fichier "sitemap" et a un controle Treeview ; 

■ sauvegarder des objets grace a la serialisation XML ; 

■ utiliser le controle ObjectDataSource pour remplir un controle d'affichage 
des donnees avec des objets ; 

■ envoyer des e-mails. 



Le guide du codeur • 103 



Site web familial 



Classes et espaces de noms utilises 106 

Acces aux donnees 106 

Interface utilisateur 107 

Realisation 109 

Check-list 116 



Site web familial 

v 



Dans ce chapitre, vous allez creer un site web personnel qui vous permettra de 
presenter votre famille ainsi que les photos de vos vacances. 

Vous utiliserez des composants cles d'ASP .NET 2.0, comme les pages maitres, 
les themes et controles lies aux donnees. 



7.1 Classes et espaces de noms utilises 

II s'agit ici, une fois de plus, d'une application web. Vous devrez done utiliser 
des clases dans l'espace de noms System. Web. 

De plus, vous manipulerez des fichiers avec les classes qui se trouvent dans 
System. I0, et vous vous connecterez a votre base de donnees grace a l'espace 
de noms System. Data. Sql CI ient. 



7.2 Acces aux donnees 

Vous aurez besoin d'une base de donnees pour stocker les photos de l'album 
que vous presenterez sur votre site web. Pour cela, creez votre nouveau site 
web dans Visual Web Developer 2005 Express. 



Explorateur de solutions 



_J C:\ ...\WebSite 2\ 



ii 



. I Explor 
Propriety: 



-:.J Ajouter un nouvel element, , 



App_Dal 



■'••{ Ajouter un element existant.. 

I Nouveau dossier 

?] Actualiser le dossier 

& Couper 

-j| Copier 

X Supprimer 
Renommer 



©1! z* -J 



A Figure 7-1 : Creation d'une 
nouvelle base de donnees pour un site 
web ASP .NET 



Sous le nom de votre site figure un dossier AppJData dans lequel vous 
stockerez votre base de donnees. Cliquez du bouton droit sur ce dossier et 
selectionnez la commande Ajouter un nouvel element. Creez une base de 
donnees SQL que vous appellerez MaFami 1 1 e.mdf. 
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Ajouter un nouvel element - C:\Documents and Settings\Administrateur\Mes documentsWisual Stu... [~?~lfi 



mm 



Modeles Visual Studio installed 



9 Fichier XML 
Mes modeles 



2^ Fichier texte 



] Base de donnees SQL 



J Rechercher des modeles en ligne. . 



Base de donnees SQL vide 



Nom : 

Langage : 



MaFamillelmdf 



Placer le code dans un fichier distinct 
Selecbonner la page maitre 



Ajouter 



▲ Figure 7-2 : La nouvelle base de donnees 

Dans TExplorateur de bases de donnees qui s'ouvre, cliquez du bouton droit sur 
le dossier Tables pour creer une nouvelle table dans la base. Creez la table 
Photos en vous basant sur la figure suivante : 



Nom de la colonne 


Type de donnees 


Null autorise 


9 PhotoID 


int 


□ 


Titre 


nvarchar(SO) 


□ 


Description 


nvarchar(MAX) 


□ 


Photo 


image 


□ 



Figure 7-3 : 

Structure de la table 
Photos 



7.3 Interface utilisateur 

Votre site web consistera en deux pages : la page principale, Default.aspx, qui 
servira a presenter votre famille, et 1' album de vos photos, Album.aspx. Vous 
pourrez par la suite, ajouter d'autres pages si vous le souhaitez. Pour le 
moment, pour assurer un style uniforme dans toutes les pages du site, vous allez 
creer une page maitre : cliquez du bouton droit sur le nom de votre site web, 
selectionnez Ajouter un nouvel element et puis le modele Page maitre. 
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Ajouter un nouvel element - C:\Documents and Settings\Administrateur\Mes documentsWisual Stu 










E3(S] 


Modeles : 










Modeles Visual Studio installes 










Web Form 


_J] Page maTtre 


|[F] Controle utilisateur Web 






Page HTML 


SjJ Service Web 


^Classe 






A?| Feuille de stv'le 


^JCIasse d'application globale 


Fichier de configuration Web 






Fichier XML 


jj] Fichier texte 


^Fichier de ressources 






[j Base de donnees SQL 


|2 DataSet 


^ Gestionnaire genenque 






,&| Plan de site 


i^jFichier VBSaipt 


^Web Form Mobile 






j^Controle utilisateur Web Mobile 


3j Fichier JScript 


^Fichier de configuration Web Mobile 






jfJ Fichier XSLT 


^Fichier d'apparence 


'-1^2 Fichier browser 






Mes modeles 










„_J Rechercher des modeles en ligne. . 










Formulaire pour les applications Web 










Norn : Defau tlaspx 




1 




Langage : | Visual Basic 


v 0 Placer le code dans un fichier distinct 






PI Selectionner la page maitre 








Ajoutei 


Annuler | 



▲ Figure 7-4 : Creation d'une page maTtre 



Votre page maitre servira de modele pour toutes les autres pages de votre site. 
Elle contient un ContentPl aceHol der par defaut, qui correspond a la region qui 
pourra etre modifiee dans les autres pages. Remplissez votre page maitre avec 
le texte que vous voulez, en dehors du ContentPl aceHol der. Par exemple, 
ecrivez le nom de votre famille comme titre de la page. Ne definissez pas les 
couleurs ou l'emplacement des elements. Cela sera fait grace aux themes que 
vous preparerez par la suite. 

Enfin, supprimez le fichier Default. aspx qui a ete cree par defaut. En effet, 
celui-ci ne tient pas compte de la page maitre que vous venez de construire. 
Vous allez done recreer un fichier qui aura le meme nom, mais qui se basera sur 
votre page maitre. 

Ajoutez un nouvel element a votre site web, comme vous l'avez fait pour la 
page maitre, mais selectionnez le modele Web Form (voir Figure 7-5). 

Les cases Placer le code dans un fichier distinct et Selectionner la page maTtre 
doivent etre cochees. La premiere permet de separer le code Visual Basic du 
code ASP .NET, ce qui apporte de la clarte, et la deuxieme vous oblige a 
selectionner la page maitre que vous venez de creer comme modele de votre 
nouveau formulaire. 

De la meme maniere, creez un deuxieme formulaire que vous appellerez 
Album.aspx. 
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Ajouter un nouvel element - C:\Documents and Settings\Administrateur\Mes documents Wisual Stu... f?~|fx] 



Modeles Visual Studio installed 



~| Web Form 

•] Page HTML 
Aj] Feuille de style 
^Fichier XML 
| J Base de donnees SQL 
4 7j Plan de site 

^Controle utilisateur Web Mobile 
Fichier XSLT 



Page maitre 
ttj] Service Web 
^jClasse d'application globale 
^ Fichier texte 

DataSet 
3j Fichier VBScript 
ijj Fichier JScript 
^Fichier d'apparence 



[|: Controle utilisateur Web 
^ Classe 

Fichier de configuration Web 
^Fichier de ressources 
^ Gesbonnaire generique 
^Web Form Mobile 
^Fichier de configuration Web Mobile 
■-ij Fichier browser 



Mes modeles 



. J Rechercher des modeles en ligne. , . 



Formdaire pour les applications Web 

Nom : | Defaultlaspx ~| 

Langage : [visual Basic v 0 Placer le code dans un fichier distinct 

PI Selectonner la page maitre 

| Ajouter | [ Annuler ~\ 

▲ Figure 7-5 : Creation d'un formulaire web base sur une page maitre 

Chaque page basee sur une page maitre contient un controle Content, qui 
correspond au ContentPlaceHolder de celle-ci. Dans le controle Content de la 
page Default.aspx, presentez votre famille et creez un lien vers 1' album de 
photos. 

Votre interface graphique est presque terminee. Vous allez la completer dans la 
prochaine section en ecrivant du code ASP .NET. 



7.4 Realisation 

Vous avez, pour l'instant, deux formulaires web vides, qui se basent sur une 
page maitre. Cependant, aucune de ces pages n'a de mise en forme ou de mise 
en page, car cela sera fait a l'aide de themes. Vous allez, d'ailleurs, creer un 
theme pour votre site web tout de suite. 

Associer un theme au site 

Tout d'abord, creez un dossier ASP .NET qui sera dedie aux themes. Cliquez 
du bouton droit sur le nom de votre projet et selectionnez, dans le sous-menu 
Ajouter le dossier ASP .NET, Theme. Appelez votre premier theme Themel. 
Dans ce dossier, vous stockerez des images de fond et des feuilles de style CSS 
qui seront appliquees a vos formulaires, des que vous aurez specifie ce theme 
comme celui par defaut. 
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Pour ce faire, ouvrez le fichier Web.config et cherchez la section pages. Ajoutez 
dans cette balise un attribut theme auquel vous affecterez comme valeur le nom 
de votre theme. 

Source de donnees 

Avant de commencer votre album de photos, glissez un objet Sql DataSource 
dans votre formulaire. II servira de source de donnees pour le controle FormView 
qui gerera votre album. Utilisez la balise active pour configurer votre objet afin 
qu'il se connecte a votre base de donnees. Les options par defaut sont 
appropriees pour les deux premiers ecrans de l'Assistant. En revanche, sur 
l'ecran Configurer I'instruction Select, en plus de cocher la case a cote de 
l'asterisque pour que l'objet Sql DataSource recupere toutes les donnees de la 
table, cliquez sur le bouton Options avancees pour specifier que les insertions 
et les mises a jour devront aussi etre gerees. II suffit pour cela de cocher les 
deux cases de la fenetre qui s'ouvre. 

Malheureusement, comme votre base de donnees utilise le type image pour la 
colonne qui stocke les photos, la configuration creee par l'Assistant ne convient 
pas completement a votre application. Vous devez done modifier le code ASP 
.NET a la main pour supprimer les references aux parametres correspondant a 
la colonne Photo : 



<asp: Sql DataSource ID="Sql DataSource" runat="server" 




Conf 1 i ctDetecti on="CompareAl 1 Val ues" 




Connect i onStri ng="<%$ Connect! onStri ngs : Connecti onStri ng %>" 


DeleteCommand="DELETE FROM [Photos] 




WHERE [PhotoID] = ^original PhotoID" 




InsertCommand=" INSERT INTO [Photos] 




([Titre], [Description], [Photo]) 




VALUES (@Titre, ^Description, OPhoto)" 




OldVal uesParameterFormatString= "original {0}" 




SelectCommand="SELECT * FROM [Photos]" 




UpdateCommand="UPDATE [Photos] 




SET [Titre] = @Titre, [Description] = ^Description 




WHERE [PhotoID] = @original_PhotoID"> 




<Del eteParameters> 




<asp: Parameter Name="original PhotoID" Type="Int32" 


/> 


</Del eteParameters> 


<UpdateParameters> 




<asp: Parameter Name="Titre" Type="String" /> 




<asp: Parameter Name="Description" Type="String" /> 




<asp: Parameter Name="original PhotoID" Type="Int32" 


/> 


</UpdateParameters> 


<InsertParameters> 




<asp: Parameter Name="Titre" Type="String" /> 




<asp: Parameter Name="Description" Type="String" /> 
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</InsertParameters> 
</asp : Sql DataSource> 

A SqIDataSource modifie sans parametre pour la colonne Photo 

Etant donne que vous avez supprime les parametres correspondant a la colonne 
Photo, vous ne pouvez pas stocker les images dans votre base de donnees, a 
moins de gerer les evenements Inserting et Updating de SqIDataSource. 

Protected Sub SqlDataSource_Inserting( 
ByVal sender As Object, 
ByVal e As SqlDataSourceCommandEventArgs) 
Handles SqIDataSource. Inserting 
Dim stateTextBox As FileUpload = 

FormVi ewl . Fi ndCont rol ( " Fi chi erPhoto" ) 
Dim inputStream As Stream = 

stateTextBox . PostedFi 1 e . InputStream 
Dim imageLength As Integer = 

stateTextBox . PostedFi 1 e . Content Length 
Dim imageBinary(imageLength) As Byte 
Dim inputRead As Integer = 

inputStream. Read (imageBi nary, 0, imageLength) 
Dim imageData() As Byte = imageBi nary 
Dim param As New SqlParameter("@photo", 

System. Data . Sql DbType . Image) 
param. Value = imageData 
e . Command . Parameters . Add (param) 
End Sub 



Protected Sub SqlDataSource_Updating( 
ByVal sender As Object, 
ByVal e As SqlDataSourceCommandEventArgs) - 
Handles SqIDataSource. Updating 
Dim stateTextBox As FileUpload = 

FormVi ewl . Fi ndControl ( " Fi chi erPhoto" ) 
If stateTextBox. FileName. Length > 0 Then 

e. Command. CommandText = "UPDATE [Photos] 
SET [Titre] = OTitre, [Description] = ODescription, 
[Photo] = @Photo WHERE [PhotoID] = @original_PhotoID" 
Dim inputStream As Stream = 

stateTextBox. PostedFi 1 e. InputStream 
Dim imageLength As Integer = 

stateTextBox . PostedFi 1 e. ContentLength 
Dim imageBinary(imageLength) As Byte 
Dim inputRead As Integer = 

inputStream. Read (imageBi nary, 0, imageLength) 
Dim imageData() As Byte = imageBinary 
Dim param As New SqlParameter("@photo", 

System. Data. Sql DbType. Image) 
param. Value = imageData 
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e . Command . Parameters . Add (param) 
End If 
End Sub 

▲ Gestionnaires des evenements Inserting et Updating du controle SqIDataSource 

Dans ces gestionnaires, on cree le parametre correspondant a la colonne Photo. 
On utilise, comme valeur de ce parametre, l'image qui se trouve dans le champ 
FichierPhoto du controle FormView que Ton creera par la suite. 

Vous allez maintenant creer le controle FormView, une nouveaute d'ASP 
.NET 2.0, qui gerera votre album photos. 

Album de photos 

Deposez un controle de type FormView dans votre fichier Album. aspx pour la 
gestion de votre album de photos. Utilisez la balise active de FormView pour 
specifier le controle SqIDataSource comme source de donnees de celui-ci et 
pour activer la pagination. 

Modifiez les modeles du controle FormView correspondant a l'edition des 
donnees, a leur insertion et a la page qui sera affichee si la source de donnees 
est vide. Voici un exemple de controle FormView pour la gestion de l'album de 
photos : 

<asp:FormView ID="FormViewl" runat="server" 
AllowPaging="True" DataKeyNames="PhotoID" 
DataSourceID="SqlDataSource"> 
<EditItemTemplate> 

Titre: 

<br /> 

<asp:TextBox ID="TitreTextBox" runat="server" 

Text='<%# Bind("Titre") %>'x/asp:TextBoxxbr /> 
Description: 

<br /> 

<asp:TextBox ID="DescriptionTextBox" runat="server" 

Text='<%# Bind("Description") %>' 

Rows="5" TextMode="Mul tiLine"x/asp:TextBox> 
<br /> 
Photo: 
<br /> 

<asp:FileUpload ID=" FichierPhoto" runat=" server" /> 

<br /> 

<asp:LinkButton ID="UpdateButton" runat="server" 

CausesVal idation="True" CommandName="Update" 

Text="Mettre a jour"> 
</asp:LinkButton> 

<asp : Li nkButton ID="UpdateCancel Button" 
runat="server" CausesVal idation=" False" 



112 • Le guide du codeur 



Realisation 



CommandName=" Cancel " Text="Annijler"> 
</asp:LinkButton> 
</EditItemTemplate> 

<InsertItemTemplate> 
Titre: 

<br /> 

<asp:TextBox ID="TitreTextBox" runat="server" 

Text='<%# Bind ("Titre") %>'x/asp:TextBoxxbr /> 
Description: 
<br /> 

<asp:TextBox ID="DescriptionTextBox" runat="server" 
Text='<%# Bind("Description") %>' 
Rows="4" TextMode="Mul tiLine"x/asp:TextBox> 

<br /> 

Photo: 

<br /> 

<asp:FileUpload ID="FichierPhoto" runat="server" /> 

<br /> 

<asp:LinkButton ID="InsertButton" runat="server" 
CausesVal idation="True" CommandName=" Insert" 
Text="Inserer"> 

</asp:LinkButton> 

<asp: Li nkButton ID=" InsertCancel Button" 
runat="server" CausesVal i dati on=" Fal se" 
CommandName=" Cancel " Text="Annuler"> 
</asp:LinkButton> 
</InsertItemTempl ate> 
<ItemTemplate> 
<h2> 

<asp:Label ID="TitreLabel " runat="server" 
Text='<%# Bind("Titre") %>'x/asp: Label > 

</h2> 

<asp:Image ID="Image2" runat="server" 

ImageUrl='<%# Eval ("PhotoID", "Photo. ashx?id={0} ") %>' /> 

<br /> 

<asp:Label ID="DescriptionLabel " runat="server" 
Text='<%# Bind("Description") %>'x/asp: Label > 

<P> 

<asp:LinkButton ID="EditButton" runat="server" 
CausesVal idation=" Fal se" ComrnandName="Edit" 
Text="Modi f i er"x/asp: Li nkButton> 

<asp: Li nkButton ID="DeleteButton" runat="server" 
CausesVal idation=" Fal se" 
CommandName= " Del ete " Text= " Suppri mer "> 

</asp:LinkButton> 

<asp:LinkButton ID="NewButton" runat="server" 
CausesVal idation=" Fal se" CornmandName="New" 
Text="Nouveau"x/asp: Li nkButton> 

</P> 
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</ItemTemplate> 

<EmptyDataTempl ate> 

<p>L' album photos est vide, cliquez 

<asp:LinkButton ID="NewButton" runat="server" 
CausesVal idation="Fal se" CommandName="New" 
Text= " i ci "></asp : Li nkButton> 
pour ajouter une photo. </p> 
</EmptyDataTempl ate> 

</asp:FormView> 

▲ Exemple de controle FormView pour la gestion de I'album de photos 

Vous pouvez personnaliser vos modeles a votre guise. La seule contrainte vitale 
a respecter est le nom des controles Fi 1 eUpl oad. En effet, il faut absolument que 
celui-ci corresponde au nom utilise dans les gestionnaires d'evenements de 
l'objet SqlDataSource. 

Tous vos controles sont directement lies a votre source de donnees, a 
l'exception de celui qui affiche l'image stockee dans la base de donnees. En 
effet, cette liaison n'est pas possible et vous devrez utiliser un gestionnaire 
generique qui retrouvera les images dans la base. 

Gestionnaire generique 

Ajoutez un fichier de type Gestionnaire generique a votre projet. Pour etre 
conforme aux modeles de l'exemple de controle FormView precedent, appelez-le 
Photo.ashx. 

Un gestionnaire generique est une simple classe capable de repondre a une 
requete HTTP. En effet, la methode ProcessRequest du gestionnaire sera 
executee a chaque appel de celui-ci et son resultat sera renvoye au client qui a 
fait la requete. Vous allez done utiliser l'identifiant de la photo que vous 
souhaitez afficher pour recuperer celle-ci dans la base de donnees et la renvoyer 
au client. 

Voici un gestionnaire generique qui cherche l'image demandee dans la base de 
donnees et la renvoie au client : 

Public Class Photo : Implements IHttpHandler 

Public Sub ProcessRequest( 
ByVal context As HttpContext) 
Impl ements IHttpHandl er. ProcessRequest 
context. Response. ContentType = "image/jpeg" 
context . Response . Cache . SetCacheabi 1 i ty ( 

HttpCacheability. Public) 
context. Response. BufferOutput = False 
Dim id As Integer = -1 
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Dim stream As Stream 
id = Convert. ToInt32( _ 

context .Request . QueryStri ng ( " i d " ) ) 
stream = GetPhoto(id) 

Const buffersize As Integer = 1024 * 16 
Dim buffer (buffersize) As Byte 
Dim count As Integer = stream. Read( 

buffer, 0, buffersize) 
While (count > 0) 

context . Response . OutputStream. Wri te ( 

buffer, 0, count) 
count = stream. Read (buffer, 0, buffersize) 
End While 
End Sub 

Private Shared Function GetPhoto( 
ByVal photoid As Integer) As Stream 
Using connection As New SqlConnection( 
Conf i gurati onManager. Connect! onStri ngs ( 
"Connecti onStri ng" ) . Connect! onStri ng) 
Using myCommand = New Sql Command ( 
"SELECT [photo] FROM [photos] 
WHERE ( [photon d] =@i d) " , connection) 
myCommand. Parameters. Add (New Sql Parameter( 

"@id", photoid)) 
connecti on. Open () 
Dim result As Object = 

myCommand . ExecuteScal ar () 
Try 

Return New Memo ry St ream ( 
CType(result, Byte())) 

Catch 

Return Nothing 
End Try 
End Using 
End Using 
End Function 

Public Readonly Property IsReusableQ As Boolean 
Impl ements IHttpHandl er. IsReusabl e 
Get 

Return True 
End Get 
End Property 

End Class 

▲ Gestionnaire generique pour recuperer des images stockees dans une base de 
donnees 
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On utilise simplement les objets Sql Connect! on et Sql Command pour se connec- 
ter a la base de donnees et recuperer l'image souhaitee. Celle-ci est transformee 
en flux MemeoryStream et renvoyee au client via la methode Response. Output 
Stream. Write de l'objet context, qui est le seul parametre de la methode 
ProcessRequest et qui correspond a la session HTTP courante. 

Maintenant que vous pouvez recuperer les images qui se trouvent dans votre 
base de donnees, votre site est fonctionnel. II ne reste plus qu'a personnaliser 
la page maitre et le theme crees precedemment pour que le site illustre au 
mieux vos vacances en famille. 



7.5 Check-list 

Dans ce chapitre, vous avez appris a : 

■ creer un site web avec un style uniforme en utilisant les pages maitres et 
les themes ; 

■ stocker des images dans une base de donnees SQL Server 2005 ; 

■ utiliser les controles lies aux donnees de Visual Basic 2005 ; 

■ utiliser un HTTPHandl er pour recuperer des fichiers stockes dans une base 
de donnees. 
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Vous allez creez, dans ce chapitre, le site web d'une association. La France 
compte pres d'un million d' associations, qu'elles soient humanitaires, sportives, 
religieuse, etc. 

La communication est souvent un outil indispensable a la vie d'une association. 
Pour presenter les activites proposees, vous allez creer un site permettant de 
consulter l'actualite de l'association, et des dossiers. Pour vivre, un site doit 
etre dynamique. Vous allez done inviter les membres du site a saisir eux-memes 
leurs actualites ou leurs dossiers pour qu'ils participent activement a la vie du 
site. 

Cela implique une gestion de la securite pour eviter que n'importe qui puisse 
modifier le site. Vous allez apprendre a mettre en place ce genre de fonction- 
nalite grace a ASP .NET 2, Visual Basic 2005 et Visual Web Developer 
Express. 



8.1 Creation de la hierarchie des pages 



0^J^Le chapitre Site web familial explique comment creer une page 

Renvoi maitre, des pages web utilisant cette page maitre et comment creer 
des menus. 

Pour debuter ce nouveau projet, creez un nouveau site web et ajoutez la 
hierarchie de pages suivantes : 



^ D:\_\SiteWebAsso\ 

S • LjU App_Code 

L^] Information. vb 
^ InformationDAO.vb 
i Qj App_Data 
ffl l4 Bin 
B £^ Prive 

B Actualites 

B lH) Default. aspx 

^ Default. aspx. vb 






Figure 8-1 : Hierarchie des pages 
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Laissez ces pages vides pour le moment. Vous allez les remplir tout au long de 
ce chapitre. Vous n'avez qu'a appliquer la page maitre creee a toutes les autres 
pages et le travail sera termine pour le moment. 



8.2 Gestion des informations 

II faut a present stocker une information en memoire. Pour cela, creez une 
classe Information qui va definir ce qu'est une information. Celle-ci peut etre 
caracterisee par un identifiant (id), un titre, son contenu, sa date de publication, 
ainsi que son type. Une information peut etre une actualite ou un dossier. II est 
done pertinent d'utiliser une enumeration pour definir le type d'information : 

Public Enum Typelnformation 

Actualite = 0 

Dossier = 1 
End Enum 

En programmation orientee objet, les caracteristiques d'un element sont sou- 
vent representees par des proprietes. Implementez done autant de proprietes que 
de donnees liees a une information. 

Vous devez arriver a un resultat proche de celui-ci : 

Public Class Information 
Private m_id As Integer 
Private m_titre As String 
Private m_contenu As String 
Private m_typeInformation As Typelnformation 
Private m_datePubl i cation As Date 

Public Property Id() As Integer 
Get 

Return m_id 
End Get 

Set(ByVal value As Integer) 

m_id = value 
End Set 
End Property 

Public Property Titre() As String 
Get 

Return m_titre 
End Get 

Set(ByVal value As String) 

m_titre = value 
End Set 
End Property 
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Public Property ContenuQ As String 
Get 

Return m_contenu 
End Get 

Set(ByVal value As String) 

m_contenu = value 
End Set 
End Property 

Public Property Type() As Typelnformation 
Get 

Return m_typeInformation 
End Get 

Set(ByVal value As Typelnformation) 

m_typeInformation = value 
End Set 
End Property 

Public Property DatePubl i cation () As Date 
Get 

Return m_datePubli cation 
End Get 

Set(ByVal value As Date) 

m_datePubl i cation = value 
End Set 
End Property 
End Class 



Creation de la base de donnees 

La gestion des informations consiste a enregistrer des donnees dans la base. 
Pour cela, vous allez utiliser SQL Server Express Edition. Demarrez 1' appli- 
cation SQL Management Studio Express Edition et creez une nouvelle base de 
donnees que vous appellerez Site Assoc. 

Dans cette base, ajoutez une table nominee Informations et creez-la selon le 
schema suivant : 



fable - dbojnformations Summary 




Column Name 


Data Type 


Alloa Nulls 


►V 


KEEBI 


int 


r 




titrejnfbrmation 


varchar(50) 


□ 




contenujnformation 


varchar(MAX) 


n 




da tejn formation 


nchar(lO) 


□ 




typejnformation 


tinyint 


r 








r 



Figure 8-2 : 

Schema de la table 
Informations 
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Pretez attention aux points suivants : 

■ Le champ icM information doit etre defini en tant que cle primaire. Pour 
cela, cliquez du bouton droit sur la ligne correspondant au champ et 
selectionnez Creer cle primaire dans le menu contextuel. 

■ Le champ id_information doit etre defini en tant que champ en auto- 
incrementation. Cela vous evitera d'incrementer manuellement la valeur 
du champ a chaque insertion d'une information. L' operation sera effectuee 
automatiquement par SQL Server. Pour cela, dans la zone des proprietes 
du champ, selectionnez la propriete Identity Specification et definissez la 
propriete Isldentity a Yes et la propriete Identity Increment a 1. 







<database default> 


m 


Computed Column Specification 






Condensed Data Type 


M 




Description 






Deterministic 


Yes 




DTS -published 


No 


m 


Full -text Specification 


No 




Has Non-SQL Server Subscriber 


No 


□ 


Identity Specification 


Yes 




(Is Identity) 


Yes 




Identity Increment 


]LZ 




Identity Seed 


1 




Indexable 


Yes 




Merge -published 


No 




Not For Replication 


No 









Figure 8-3 : 

Auto-incrementation 
d'un champ 



Voici le script SQL permettant de creer directement la table Informations : 

CREATE TABLE [dbo] . [Informations] ( 

[idj'nformation] [int] IDENTITY(1,1) NOT NULL, 

[ti tre_infonnation] [varchar] (50) 
COLLATE French_CI_AS NOT NULL, 

[conteniHnformation] [varchar] (max) 
COLLATE French_CI_AS NOT NULL, 

[date_information] [nchar] (10) 
COLLATE French_CI_AS NOT NULL 
CONSTRAINT [DF_Informations_date_information] 
DEFAULT (getdate()), 

[type_information] [tinyint] NOT NULL, 
CONSTRAINT [PK Informations] PRIMARY KEY CLUSTERED 

( 

[idj'nformation] ASC 
)WITH (PADJNDEX = OFF, IGN0RE_DUP_KEY = OFF) ON [PRIMARY] 
) ON [PRIMARY] 

GO 
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Inserer les informations 

II faut a present implementer la fonctionnalite d' insertion des informations dans 
la base de donnees. 

La classe d'acces aux donnees se nommera InformationDAO. Ajoutez done cette 
nouvelle classe dans votre projet. Celle-ci se retrouve dans le dossier special 
d'ASP .NET AppJOode. 

Vous utiliserez deux espaces de noms relatifs a la gestion des donnees en base 
SQL Server: System. Data et System. Data. SqlCl ient. N'oubliez done pas de 
placer des instructions d' importation de ces espaces de noms en tout debut du 
fichier contenant votre classe. 

Pour inserer des donnees dans une base de donnees SQL Server, vous devez 
utiliser au moins deux objets : un objet Sql Connection, qui permet d'etablir une 
connexion a la base, et un objet Sql Command, qui permet d'executer une requete 
SQL. 

Vous ouvrirez la connexion en specifiant une chaine de connexion qui designe 
la base a utiliser ainsi que le mode d'authentification. 



Attributs de la chaTne de connexion a definir 


Attribut 


Description 


server 


Definit l'adresse du serveur ainsi que son instance. Vous 
pouvez indiquer ici le nom de la machine et le nom 
d' instance, ou alors l'adresse IP de la machine et le nom 
d' instance. 


Database 


Nom de la base de donnees a laquelle se connecter. 


User ;password 


Permet de definir le nom d'utilisateur et le mot de passe a 
utiliser en cas d' activation du mode d'authentification 
SQL. 


Integrated Security 


Doit etre defini et egal a SSPI en cas d'activation du 
mode d'authentification Windows. 



Ouvrez la connexion dans un bloc Try... Catch car cette ouverture peut echouer 
en cas d'indisponibilite du serveur par exemple. 

Ajoutez les parametres d'entree (et meme de sortie) a l'objet Sql Command en 
utilisant la methode Add de la collection Parameters de celui-ci, puis en 
definissant le nom du parametre a ajouter definir et sa valeur : 

Imports System. Data 

Imports System. Data. Sql CI lent 

Public Class InformationDAO 
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Public Shared Sub CreateInformation(ByVal 
information As Information) 
Dim connection As New Sql Connection 
(" server= . \SQLEXPRESS ;database=si teassoc ; i ntegrated securi ty=SSPI " ) 
Try 

connection. Open () 

Dim cmdCreate As Sql Command 

cmdCreate = connect! on. CreateCommand 

cmdCreate. CommandText = "insert into informations" & 

"(titre_information, contenu_information, " & _ 

& "type_information) values (@titre,@contenu,@type) " 

With cmdCreate. Parameters 

.AddWi thVal ue ( "@ti tre" , i nformat i on .Ti tre) 

. AddWi thVal ue("@contenu" , information.Contenu) 

. AddWi thVal ue("@type" , i nformati on .Type) 

End With 

cmdCreate. ExecuteNonQuery() 

Catch ex As Exception 

Throw 
Final ly 

connection. Dispose() 
End Try 
End Sub 
End Class 



Inserer des actualites et des dossiers 

Vous pouvez a present passer a la realisation des pages d'edition des actualites 
et des dossiers situees dans le dossier Prive. 

La realisation de ces pages est simple. Pour permettre aux redacteurs d' actua- 
lites et de dossiers de rediger leurs informations et d'appliquer une mise en 
page et une mise en forme au texte saisi, il est necessaire d'utiliser un 
composant externe a ASP .NET, bien plus riche que le controle TextBox propose 
en standard. 

Utilisez par exemple le controle FreeTextBox, qui est gratuit et disponible en 
telechargement a l'adresse http://freetextbOX.com/default.aspx, sous la forme d'un 
fichier ZIP. 

Pour l'ajouter dans la boite a outils, dezippez le fichier dans un dossier grace 
a un outil de compression/decompression. 

Cliquez du bouton droit dans la boite a outils. Dans le menu contextuel qui 
s'affiche, selectionnez Choisir les elements. Dans la boite de dialogue qui 
s'affiche, cliquez sur le bouton Parcourir pour rechercher le fichier FreeText- 
Box.dll present dans le dossier Framework-2.0. 
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Choisir des elements de boite a outils 



Composants .NET Framework j Composants COM | 



-UX] 



O FontDialogArray 
0 Form 
p| Form View 

B[ 

l~l GenerniT'/peProvider 
l~l GetConfigurationAction 
l~l GetMemberAction 
l~l GetProjectAction 
f~l GetProjectl tern Action 

<J 



| Espace de noms 



| Nom de I'assembly 



Repertoire -*■ 



Microsoft, VisualBasic. Compa tibi. . 
System , Web , UI , MobileControls 
System, Web, ULWebControls 



FreeTextBoxControls 



Microsoft, Practices , RedpeFram . 
Microsoft . Practices , ReopeFram . 
Microsoft , Practices . ReapeFram , 
Microsoft . Practices . ReopeFram , 
Microsoft . Practices . ReapeFram , 



Microsoft. VisualBasic, C, , 
System. Web, Mobile (2,, 
System. Web (2,0,0,0) 



Global Ass 
Global Ass 
Global Ass 



FreeTextBox (3.1.6.34... C:pocum 



Microsoft , Practices , Rec. . 
Microsoft , Practices , Rec. . 
Microsoft, Practices. Rec. 
Microsoft, Practices. Rec. 
Microsoft. Practices. Rec. 



Ci'f'rograi 
G'Prograi 
C:\Prograi 
C:\Prograi 
C: ''prograi ▼ I 



ograt t| 



Filtre: |~ 
FreeTextBox 



Langue : Langue indifferente (Pays indifferent) 
Version : 3. 1.6. 3485 1 (Version commerdale) 



J Reii 



A Figure 8-4 : Ajout de FreeTextBox dans la boite a outils 
Validez pour afficher le controle dans la boite a outils. 

II ne reste plus qu'a glisser le controle sur la page de redaction des actualites 
pour pouvoir l'utiliser. Ajoutez egalement un controle TextBox, que vous 
nommerez txtTitre, qui permettra de saisir le titre de l'actualite, et un bouton 
qui permettra d'effectuer l'insertion. 

Pour effectuer l'insertion, appelez la methode Createlnformation ecrite aupa- 
ravant, en lui passant en parametre un objet Information : 



Protected Sub Buttonl_Cl ick(ByVal sender As Object, 
ByVal e As System. EventArgs) Handles Buttonl. Click 
Dim information As New Information 
information.Contenu = FreeTextBoxl.Text 
information. Titre = txtTitre. Text 
information. Type = Typelnformation. Actual ite 
Inf ormati onDAO . Createlnf ormati on (i nf ormati on) 
End Sub 
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t£ Design 0 HTML 



A Figure 8-5 : Le controle FreeTextBox dans une page web en cours d'execution 



Des que le redacteur saisira une information en appliquant une mise en forme 
(mise en gras, italique...) et cliquera sur le bouton, cela provoquera une erreur 
"Une valeur Request. Form potentiellement dangereuse a ete detectee a partir 
du client". Cette erreur vient du fait que Ton essaie d'envoyer du code HTML au 
serveur alors que ASP .NET bloque cette possibility par defaut pour des raisons 
de securite. 

Pour eviter une telle erreur, vous devez ajouter I'attribut ValidateRequest dans 
la directive Page en lui attribuant la valeur false. Pour cela, affichez le code 
source HTML de votre page dans Visual Web Developer, et dans la premiere 
ligne (ou se trouve la directive Page), ajoutez I'attribut et sa valeur. 



Repetez les memes operations pour la page de redaction des dossiers, en 
prenant soin de modifier le type de l'information dans l'evenement Click du 
bouton d'insertion pour inserer un dossier, et non une actualite, dans la base. 

Afficher les actualites et les dossiers 

Maintenant qu'il est possible d'ajouter des donnees dans la base et d'afficher 
des informations, vous allez creer la page d'affichage des actualites, l'affichage 
des dossiers pouvant se faire exactement de la meme maniere. 



^arque 

SecuriteASP.NET 
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Placez un controle Sql DataSource sur la page Actualites.aspx. II s'agit d'un 
controle source de donnees, qui permet de remplir un controle d'affichage avec 
des donnees issues d'une base de donnees, et tout cela sans ecrire une ligne de 
code. 

Cliquez sur le smart tag du controle puis sur le lien Configurer la source de 
donnees. 

Dans l'Assistant qui s'affiche, cliquez sur le bouton Nouvelle Connexion pour 
creer la chaine de connexion qui sera utilisee par le controle. Selectionnez une 
base de type SQL Server puis saisissez les informations fournies dans la chaine 
de connexion definie precedemment. 



Ajouter une connexion 



JlJxJ 



Entrez les informations pour vous connecter a la source de donnees 
selectionnee ou diquez sur "Modifier' pour selectionner une autre source 
de donnees et/ou un autre fournisseur, 



Source de donnees : 

| Micro soft SQL Ser ei (SalC ent 



Modifier.. 



Nom du serveur : 



\SQLEXPRESS 

Connexion au serveur — 
P Utiliser lauthenbfication Windows 
C Utiliser I authentication SQL Server 

N_om d'utilisateur : I" 
Mp_t de passe : f 



3 



r Enregistrer mon mot de passe 



Connexion a la base de donnees 



Seiectonner ou entrer un nom de base de donnees 
" Attacher un fichier de base de donnees : 



Nom bgique 




Figure 8-6 : 

Parametres 
Connexion 

Validez et cliquez sur Suivant dans l'Assistant pour selectionner les donnees a 
afficher. La base n'ayant qu'une seule table, la table Informations est alors 
selectionnee par defaut. Selectionnez les champs que vous souhaitez afficher. 
Selectionnez-les tous, excepte le champ type_information. 
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Vous devez a present definir un critere de selection puisque toutes les 
informations sont stockees dans la table Informations : les actualites comme les 
dossiers. 

Pour ce faire, cliquez sur le bouton Where, selectionnez le champ sur lequel 
portera le critere, c'est-a-dire le champ type_i information. Dans la zone de 
selection Source, selectionnez None, et affectez la valeur 0 au parametre. Cette 
valeur 0 est la valeur definie par l'enumeration Typelnformation creee en debut 
de chapitre. Validez et fermez l'Assistant pour afficher les donnees. 



Ajouter une clause WHERE 



-UxJ 



Ajoutez une ou plusieurs conditions a la dause WHERE de instruction. Pour chaque condition, vous pouvez 
specifier soit une valeur litterale, soit une valeur parametree, Les valeurs parametrees obtiennent leurs 
valeurs au moment de f execution en fonction de leurs proprietes, 

Proprietes du parametre 
Valeur : 



1 tvpejnformation 


d 


Operateur : 


- 


d 


Source : 


(None 






Expression SQL : 


Valeur : 




[tvpejnformation] = @type_informatjon 




Ajouter 


Clause WHERE : 






Expression SQL 


Valeur 










▲ Figure 8-7 : Clause Where 

Ajoutez a present un controle DataList sur votre page, affichez son smart tag 
pour selectionner le controle Sql DataSource qui vient d'etre cree comme source 
de donnees. 

Des que Ton affecte une source de donnees au controle, celui-ci reconnait les 
differents elements a afficher. 

Toujours dans le smart tag, cliquez sur le lien Mise en forme automatique, pour 
selectionner un style d'affichage plus propre et plus professionnel que celui par 
defaut. 

Vous pouvez maintenant executer la page a l'aide de la touche (F5) pour verifier 
que les actualites s'affichent correctement. 

L'affichage des dossiers peut se faire exactement de la meme maniere. Vous 
devez simplement modifier la valeur du parametre de la clause Where et la 
definir a 1 pour recuperer les dossiers, et non les actualites. 
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8.3 Gestion de la securite 

ASP .NET 2 propose une gestion de la securite simple a mettre en oeuvre. Nul 
besoin d'ecrire du code pour implementer une gestion des membres, des roles, 
des autorisations, de l'authentification, vous pouvez tout faire directement, en 
modifiant quelques parametres de configuration de 1' application, et en utilisant 
les controles web de securite, tels que le controle de login, le controle de 
creation de compte, etc. 

Creation de la base de donnees 

Creez la base de donnees qui va contenir les informations necessaires a la 
gestion des membres de votre site. Habituellement, cette etape prend du temps, 
car il est necessaire de reflechir au schema de la base, aux donnees a 
stocker, etc. 

Pour vous faciliter la vie et mettre en place rapidement une gestion des 
membres dans une application web, ASP .NET 2 propose un Assistant capable 
de creer automatiquement une base de donnees, les differentes tables et 
procedures stockees necessaires a une gestion solide des membres. 

Pour lancer cet Assistant, executez le programme aspnet_regsql.exe present 
dans le dossier d' installation du Framework .NET 2. 



^arque 

* Dossier du Framework .NET 2 

Le Framework .NET se situe dans le dossier WindowslMicrosoft.NET/Framework. 
Vous y trouverez un dossier par version du Framework .NET installe sur votre 
machine. Rendez-vous dans le dossier de la version 2. Exemple : 
C:\WINDOWS\Microsoft. NEJ\Framework\v2. 0.50 72 7. 



Une fois l'application lancee, l'Assistant s'affiche (voir Figure 8-8). 

Cliquez sur Suivant pour passer a l'etape suivante et selectionnez l'option 
Configurer SQL Server pour les services a" applications. 

Cliquez de nouveau sur le bouton Suivant pour saisir les parametres de 
connexion a votre serveur SQL Server. Si votre serveur est installe sur votre 
poste de developpement, vous pouvez saisir ASQLEXPRESS dans le champ 
Serveur, le point designant la machine locale, et SQLEXPRESS designant l'ins- 
tance creee lors de l'installation de SQL Server 2005 Express. 
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'*? Assistant Installation de SQL Server pour ASP.NET 




Cet Assistant cree ou configure une base de donnees SQL Server qui stocke des informations pour les 
services duplication ASP NET (appartenance. profils. gestion des roles, fournisseur de personnaltsations 
et devenements Web SQL) 

Pour configurer la base de donnees pour ces fonctionnalites individuelles ou pour des fonctionnalites 
additionnelles. telles que letat de session ou la dependance de cache SQL. executez aspnet_regsql a la 
ligne de commande Pour obtenir de laide sur les options de ligne de commande, utilisez le commutateur 



Cliquez sur Suivant pour continuer. 




▲ Figure 8-8 : Assistant de creation de base de donnees de gestion des membres 

Cliquez de nouveau plusieurs fois sur le bouton Suivant pour valider la creation 
de la base de donnees. Cette base s'appelle par defaut aspnetdb et peut etre 
utilisee par plusieurs applications. 

Si vous ouvrez a present SQL Server Management Studio Express, vous 
trouverez une base de donnees aspnetdb contenant plusieurs tables, comme 
aspnet_Membership, aspnet_Users, aspnet_UserlnRoles, etc. 



J Tables 

PATOCE\SQLEXPRESS\Patabases\aspnetdb\Tables 12 Item(s) 



Name 


Sinena 


1 ~1 System Tables I 




_D aspnet_Applicatons 


dbo 


_H aspnet_Membership 


dbo 


J aspnet_Paths 


dbo 


aspnet_PersonalizabonAIIUsers 


dbo 


_11 aspnet_PersonalizationPerUser 


dbo 


_3 aspnet_Profile 


dbo 


_J aspnet_Roles 


dbo 


_D aspnet_SchemaVersions 


dbo 


_D aspnetJJsers 


dbo 


J aspnet_UsersInRoles 


dbo 


_D aspnet_WebEvent_Events 


dbo 



M 



A Figure 8-9 : Tables generees par I'Assistant 
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Examinez la liste des procedures stockees qui ont ete generees et qui accedent 
a ces tables (plus d'une cinquantaine !) : l'Assistant a fait une bonne partie du 
travail. Cette tache aurait necessite plusieurs heures si elle avait du etre realisee 
manuellement. 



Configuration de I'application 

L'etape suivante consiste a configurer I'application web pour utiliser tout ce qui 
a ete genere. 

Pour cela, affichez l'Explorateur de solutions et cliquez sur l'icone d'acces au 
site d' administration de I'application. 



Expiorateur de solutioi 



E 



> D:\.. 



\Site Web A! 

_j App Code [ Configuration ASP.NET 



Information. vb 
—j App_Data 
t Pnve 

® "i itUjimMja 

'~-\ Default. aspx 

Login. aspx 
^ MasterPage. master 
1^1 News. aspx 
1^1 Signin.aspx 
[i^ web.config 



I < Figure 8-10 : Icone d'acces 

Cliquez sur l'onglet Securite puis sur le lien Selectionner le type d'authentifi- 
cation. 

Vous arrivez sur une page permettant de selectionner le type d'acces au site : 
depuis un reseau local ou depuis Internet. 

Selectionnez Faeces depuis Internet. Cela a pour effet de configurer I'applica- 
tion pour qu'elle utilise une authentification basee sur un formulaire (comme la 
grande majorite des sites web), et non basee sur les comptes Windows. 

Rendez-vous ensuite sous l'onglet Fournisseur. II permet de selectionner le 
fournisseur d'acces aux donnees a utiliser pour acceder aux donnees relatives a 
la gestion des membres. Cliquez sur le lien Selectionner un fournisseur d'acces 
unique pour toutes les donnees de gestion de site et selectionnez le fournisseur 
AspNetSqIProvider. Ce fournisseur permet d'utiliser les donnees generees par 
l'Assistant precedemment utilise. Cliquez sur le lien Test pour verifier que la 
connexion a la base de donnees se fait correctement et validez. 
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Creation des roles 

Vous allez maintenant creer les roles utilisateurs de votre application. 
Le site web accepte plusieurs types d'utilisateurs : 

■ Les utilisateurs anonymes, qui viennent consulter le site web pour 
recuperer des informations sur 1' association. 

■ Les redacteurs d'actualites, authentifies sur le site et qui peuvent ajouter 
des informations sur le site. 

■ Les redacteurs de dossiers, authentifies sur le site et qui peuvent ajouter 
des dossiers. 

Pour creer ces deux roles, rendez-vous sous l'onglet Securite du site web 
d' administration et cliquez sur le lien Activez les roles. 

Cliquez ensuite sur le lien Creer ou Gerer des roles pour creer les deux roles que 
vous nommerez RedacteurActualites, RedacteurDossiers. 

Creation des regies d'acces 

II faut a present creer les regies d'acces aux differents dossiers du site web. 
Pour cela, toujours sous l'onglet Securite du site web d' administration, cliquez 
sur le lien Creer des regies d'acces. Ces regies d'acces correspondent aux 
autorisations que vous souhaitez affecter aux membres en fonction de leurs 
roles : 



Liste des regies d'acces a mettre en place 


Dossier 


Role 


Regie 


Prive 


Tout le monde 


Refuser 


Prive\Actualites 


RedacteurActualites 


Autoriser 


Prive\Dossiers 


RedacteurDossiers 


Autoriser 



La creation est intuitive : il suffit de cliquer sur le dossier souhaite, de 
selectionner le role souhaite ainsi que la regie a creer pour que les autorisations 
soient automatiquement gerees. 
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H3K 






_^ i 


Accueil Securite Application Fournisseur 




Vous pouvez eventuellement ajouter des regies pour controler I'acces au site 
Web entier ou a des dossiers particuliers. Les regies peuvent s'appliquer a des 
utilisateurs et roles specifiques, a tous les utilisateurs, aux utilisateurs anonymes 
ou a plusieurs de ces categories. Les regies s'appliquent egalement aux sous- 
dossiers. 




Ajouter une nouvele regie d'acces 






Selectionnez un repertoire La regie s'applique a : Autorisation : 
pour cette regie : a R6|e 
BO SiteWebAsso | RedacteurActualites _»| ^Autonser 
C] App_Data 

n Add Code r utilisateur 
a i_j Pnve ff Refuser 

Qj Actualites Rechercher des utilisateurs 

S Dossiers C Tous les utilisateurs 
' — ' f* Utilisateurs anonymes 


i i 

Annuler 




OK 



▲ Figure 8-1 1 : Creation de regies d'acces 



Creation d'un utilisateur 

II ne reste plus qu'a creer le compte utilisateur qui sera, par exemple, redacteur 
d'actualites pour enfin etre capable de mettre en place le mecanisme de gestion 
des membres et des roles au sein de 1' application. 

Pour cela, sous l'onglet Securite, cliquez sur le lien Creer un utilisateur. Puis 
dans la fenetre qui s'ouvre, saisissez toutes les informations necessaires a la 
creation du compte, sans oublier de selectionner le role RedacteurActualites. 



Creer un utilisateur 


| Roles | 


Inscrivez-vous pour obtenir votre nouveau 
compte 


Selectionnez des roles pour cet 
utilisateur : 

RiRedacteiirActualites 


Nom d'utilisateur : |Patrice 

Confirmer le mot dei 

passe : ' 

Adresse de messagerie : |patrice@wygwam 
Question de securite : |Question 
Reponse de securite : |Password 


I - RedacteurDossiers 


Creer un utilisateur 




P Utilisateur actif 






Precedent 



▲ Figure 8-12 : Creation de I'utilisateur RedacteurActualites 
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II ne vous reste plus qu'a realiser les pages de login et de creation de compte 
pour que la securite soit fonctionnelle sur le site web. 



Pour ce faire, rien de plus simple 
controle Login. 



ouvrez la page Login. aspx et placez un 



+ Validation 




+ Navigation 


- Connexion 


1^ Pointeur 


Login 


i LoginView 




4*! PasswordRecovery 




LoginStatus 




^abi LoginName 




CreateUserWizard 




d* ChangePassword 





A Figure 8-13 : Controle Login dans 
la boite a outils 



Le controle Login represente une boite de dialogue de connexion. Cette boite 
est semblable a toutes celles que Ton a l'habitude de voir sur les sites web : elle 
permet au visiteur de saisir son nom d'utilisateur, son mot de passe et de 
specifier s'il souhaite que son identification soit memorisee ou non. 

II ne s'agit pas d'un simple controle graphique. Lorsque vous l'inserez sur une 
page web, vous indiquez a ASP .NET 2 que vous souhaitez utiliser les services 
de gestion des membres qu'il propose. En effet, ce controle a un comportement 
predefini, ce qui le rend pret a l'emploi. 

Vous pouvez des a present le tester en executant la page et en essayant de vous 
connecter sous le compte utilisateur Administrateur que vous avez cree, et sous 
un compte qui n'existe pas pour verifier que ASP .NET renvoie bien une erreur 
d' identification dans ce cas. 

Le controle etant pret a l'emploi, il suffit d'appliquer une petite modification de 
mise en forme afin que le resultat soit parfait. Pour cela, cliquez sur le smart tag 
puis sur le lien Mise en forme automatique. Une boite de dialogue s'afFiche. Elle 
propose differents styles a appliquer au controle Login. Selectionnez celui qui 
vous convient. 



Se connecter 



Nom d'utilisateur : |~ 



Mot de passe : | 
l~~ Memoriser le mot de passe. 



-Mil 



Se connecter 



T aches Login 



Mise en forme automatique. ■ 
Convertir en modele 
Administrer le site Web 



< Figure 8-14 : 

Appliquer un style au 
controle Login 
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II faut egalement modifier la page Signin.aspx, qui permet de creer un compte 
utilisateur,. Placez un controle CreateUserWizard, qui est un Assistant de 
creation de compte. II permet de creer des utilisateurs sans ecrire une seule 
ligne de code. 

De plus, des validations sont effectues pour verifier que le nom d' utilisateur est 
bien unique, que le mot de passe est assez complexe, etc. 



^arque 

yf Mot de passe 

Lors de la creation d'utilisateurs avec CreateUserWizard, une erreur peut 
intervenir au niveau de la validation du mot de passe. En effet, les regies de 
securite d'ASP .NET imposent de saisir des mots de passe de 7 caracteres 
minimum, avec au moins un caractere non alphanumerique. II suffit de saisir un 
mot de passe satisfaisant ces regies pour que la creation de I'utilisateur soit 
effective. 



8.4 Check-list 

Dans ce chapitre, vous avez appris a : 

■ inserer des donnees dans une base de donnees SQL Server Express 2005 ; 

■ afficher des donnees provenant d'une table grace a un controle 
SqlDataSource ; 

■ implementer des fonctions de securite telles que la gestion des membres et 
des roles dans un site web. 



134 • Le guide du codeur 



Moniteur 

de performances 



Classes et espaces de noms utilises 1 36 

Espace de noms My 136 

Recuperer des informations grace a I'espace 

de noms System. Management 141 

Afficher des informations sur le processeur ... 144 

Creer une vue synthetique 145 

Check-list 149 



Moniteur de performances 

v 



Les utilitaires de diagnostic permettant d'afficher des informations precises sur 
l'ordinateur que Ton est en train d'utiliser et de mesurer son activite sont de 
plus en plus legion, et sont de plus utilises. 

Ces outils permettent de s' assurer que tout fonctionne correctement, et de 
savoir le taux d' occupation de la machine en regardant des informations telles 
que 1' occupation de la memoire vive, l'espace disque utilise sur le ou les 
disques dur, le taux d'occupation du microprocesseur, etc. 

Pour avoir un outil qui vous convienne parfaitement, vous allez creer votre 
propre moniteur de performances. II affichera les caracteristiques detaillees de 
l'ordinateur et surveillera les informations les plus pertinentes en les affichant 
sous forme de graphique. 

9.1 Classes et espaces de noms utilises 

Vous allez utiliser plusieurs espaces noms. 

L'espace de noms My est special. II est apparu avec la version 2005 de Visual 
Basic et n'existait pas dans les versions 2002 et 2003. II permet d'acceder a un 
ensemble de fonctionnalites souvent utilisees. 

Vous allez creer une application Windows et utiliserez done frequemment 
l'espace de noms System. Windows. Forms, qui contient toutes les classes permet- 
tant de creer des interfaces graphiques grace a des formulaires et a des controles. 

System. Management donne acces a la bibliotheque WMI, qui permet de gerer un 
ordinateur et de recuperer des informations detailles a son propos. 

9.2 Espace de noms My 

Vous allez commencer par recuperer quelques informations simples a propos de 
l'ordinateur grace aux fonctionnalites proposees par l'espace de noms My. II 
permet d'acceder rapidement a un ensemble de fonctionnalites utiles, sans 
recourir aux nombreux espaces de noms presents dans le Framework .NET 2. 

My contient les classes suivantes : 



Fonctionnalites proposees par l'espace de noms My 


Classe 


Fonctionnalite 


Appl i cation 


Informations sur l' application : son titre, sa version, sa description, 
son auteur, etc. 


Computer 


Informations et acces a certaines fonctionnalites liees a 
l'ordinateur : manipulation de la Base de registre, acces au systeme 
de fichiers, informations sur les composants, etc. 
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Fonctionnalites proposees par I'espace de noms My 


Classe 


Fonctionnalite 


Forms 


Permet d'acceder a la collection des formulaires de 1' application. 


Ressources 


Permet d'acceder aux ressources de l'application : icones, 
images, etc. 


Settings 


Parametres de l'application et parametres utilisateurs 


User 


Information sur l'utilisateur qui execute l'application : nom 
d'utilisateur, groupe, domaine auquel il est rattache, etc. 


WebServices 


Permet d'acceder a la collection des services web references au 
niveau du projet. 



Vous allez dans un premier temps recuperer les informations proposees par la 
classe Computer, presente dans I'espace de noms My. 



Informations sur le systeme Sexploitation 

Vous allez commencer par afficher des informations sur le systeme d' exploi- 
tation installe sur votre ordinateur. Pour cela, et dans le but de les regrouper de 
maniere logique dans la fenetre, ajoutez un controle GroupBox puis trois 
controles Label dans GroupBox. Ces controles Label vont permettre d' afficher le 
nom de systeme d' exploitation, son type et sa version. Changez la propriete 
Name de ces controles Label et utilisez les valeurs suivantes : 1 bl OS, lbl Plate- 
Forme et lbl Version. Ajoutez trois autres controles Label pour decrire ces 
champs. 

II ne reste plus qu'a afficher la valeur reelle de ces informations dans les 
controles Label que vous venez de creer. Ces informations sont accessibles via 
la propriete Info de l'objet Computer present dans I'espace de noms My. Vous 
allez done utiliser My. Computer. Info pour afficher tous les elements necessaires 
dans l'evenement Load du formulaire afin que les donnees soit affichees des son 
ouverture. 

Private Sub Forml_Load(ByVal sender As System. Object, 
ByVal e As System. EventArgs) Handles MyBase.Load 
With My. Computer 

IblOS.Text = .Info.OSFullName 
IblPlateForme.Text = .Info.OSPlatform 
IblVersion.Text = .Info.OSVersion 
End With 
End Sub 
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- Informations — 




Systeme d exploitation : 


Microsoft Windows XP Professional 


Plate-Forme : 


Win32NT 


Version : 


5 1 2600 131072 



▲ Figure 9-1 : Affichage des informations sur le systeme d'exploitation 



Information sur ('utilisation de la memoire 

Vous allez a present afficher des informations sur 1' utilisation de la memoire de 
l'ordinateur. II s'agit de donnees concernant la memoire physique de la machine 
(la memoire vive, egalement appelee RAM) et la memoire virtuelle. 

En ce sens, vous devez ajouter quelques controles a l'interface de la fenetre. 
Commencez comme precedemment par placer un controle GroupBox pour 
delimiter le groupe de controles qui afficheront des donnees sur la memoire. 
Ajoutez ensuite quatre controles Label . Modifiez leur propriete Name en 
affectant les valeurs lblMemPhyFree, lblMemPhyTotal, lblMemVirtFree et lbl- 
MemVi rtTotal , pour afficher la memoire physique libre, le volume total de 
memoire physique, la memoire virtuelle libre et le volume total de la memoire 
virtuelle. Ajoutez quelques controles Label "compagnons" pour decrire les 
champs precedemment inseres dans la fenetre. 

Ajoutez enfin deux controles ProgressBar pour afficher le pourcentage de 
memoire physique et virtuelle occupee. 



- Memoire — 

Memoire Physique 

Ubre: 1389 Mo 
Totale : 2046 Mo 


Memoire Virtuelle 

Ubre: 1762 Mo 
Totale : 2018 Mo 


■■■■■I 


III 



A Figure 9-2 : Affichage des informations sur la memoire 



Pour afficher des informations sur la memoire, vous allez utiliser comme 
precedemment My. Computer. Info. Mais pour actualiser ces donnees en quasi 
"temps reel", vous utiliserez un controle Timer. 



Proprietes fournissant des informations sur la memoire 


Propriete 


Description 


Avai 1 abl ePhysi cal Memory 


Memoire vive physique (RAM) disponible sur 
l'ordinateur. Valeur exprimee en octets. 


Avai 1 abl eVi rtual Memory 


Memoire virtuelle disponible sur l'ordinateur. 
Valeur exprimee en octets. 
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Proprietes fournissant des informations sur la memoire 


Propriete 


Description 


Total Physical Memory 


Total de la memoire vive presente sur le systeme 
(libre et occupee). Valeur exprimee en octets. 


Total Virtual Memory 


Total de la memoire virtuelle presente sur le 
systeme (libre et occupee). Valeur exprimee en 
octets. 



Les valeurs sont toutes exprimees en octets. II est done necessaire d'effectuer 
une operation arithmetique pour convertir cette valeur en megaoctets, plus 
lisible pour l'utilisateur. 

Un kilo-octet etant egal a 1 024 octets, et un megaoctet etant egal a 1 024 Ko, 
il faut done diviser la valeur renvoyee par les proprietes par le carre de 1 024 : 

With My. Computer. Info 

IblMemPhy Free. Text = CType(.AvailablePhysical Memory 
/(1024*1024),Intl6) 
IblMemPhy Free. Text += " Mo" 
End With 

De meme, pour afficher le pourcentage de memoire occupee, il est necessaire 
d'effectuer quelques operations. La premiere etape consiste a recuperer le 
pourcentage de memoire libre et a effectuer un simple calcul de pourcentage. 

Dim physical As Double 

physical = My. Computer. Info. AvailablePhysical Memory/ 

My. Computer. Info. Total Physical Memory 
physical *= 100 

Vous avez a present le pourcentage de memoire libre. Pour avoir le pourcentage 
de memoire occupee, il suffit de soustraire le pourcentage obtenu a 100. 

prgPhysical . Val ue = 100 - physical 

Timer est un controle non visuel, qui permet d'executer du code en boucle par 
intervalles de temps regulier, par exemple toutes les secondes (voir Figure 9-3). 

Placez un controle Timer sur votre formulaire. Celui-ci apparait alors dans la 
zone des composants non visuels. Selectionnez-le pour modifier ses proprietes. 

Modifiez sa propriete Interval, definie en millisecondes : donnez-lui une 
valeur de 500. Interval permet de definir l'intervalle de temps qui separe deux 
executions de code. 
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Figure 9-3 

bolte a outils 



Controle Timer dans la 



Modifiez ensuite sa propriete Enabled et definissez-la a True pour activer le 
controle Timer des Touverture de la fenetre. 

II ne reste plus qu'a placer le code dans l'evenement Tick du Timer, declenche 
en boucle a intervalles de temps regulier. 



Timerl System. Windows. Forms .Timer 



Tick 

Se produit lorsque I'intervalle de temps spedfie s'est ecoule. 



< Figure 9-4 : 

Evenement Tick 



Private Sub Timerl_Tick(ByVal sender As System. Object, 
ByVal e As System. EventArgs) Handles Timerl. Tick 
Dim physical As Double 
With My. Computer. Info 

IblMemPhy Free. Text = CType(.AvailablePhysicalMemory 
/ (1024 * 1024), Intl6) 
IblMemPhy Free. Text += " Mo" 

physi cal = . Avai 1 abl ePhysi cal Memory/ .Total Physi cal Memory 
physical *= 100 

prgPhysical .Value = 100 - physical 
Dim virtual As Double 

1 bl MemVi rt Free .Text=CType (Avai 1 abl eVi rtual Memory 
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/( 1024*1024), I ntl6) 
IblMemVirtFree.Text += " Mo" 
vi rtual = . Avai 1 abl eVi rtual Memory 
virtual /=. Total Virtual Memory 
virtual *= 100 
End With 

prgVi rtual .Value = 100 - virtual 
End Sub 

II ne manque plus qu'a afficher les informations concernant le volume total de 
memoire libre et virtuelle. Comme elles sont fixes (on n'ajoute pas de memoire 
vive lorsque 1'ordinateur est en cours d'utilisation), vous allez afficher ces 
donnees une fois pour toutes, lors de l'ouverture de la fenetre. Pour cela, il est 
necessaire d'ajouter quelques lignes de code a l'evenement Load du formulaire : 

With My. Computer 

IblOS.Text = .Info.OSFullName 
IblPlateForme.Text = .Info.OSPlatform 
IblVersion.Text = .Info.OSVersion 
End With 
With My. Computer. Info 

1 bl MemPhy Total .Text=CType ( .Total Physi cal Memory 

/ (1024*1024), Intl6) 

Ibl MemPhy Total .Text += " Mo" 

IblMemVirtTotal .Text = CType(.TotalVirtualMemory 

/(1024 * 1024), Intl6) 

End With 

IblMemVirtTotal .Text += " Mo" 



9.3 Recuperer des informations 
grace a I'espace de noms 
System . Management 

II est possible de recuperer, grace a I'espace de noms My, quasiment toutes les 
informations possibles a propos d'un systeme via une API appelee Windows 
Management Instrumentation (WMI). En outre, cette API permet de modifier 
des parametres systeme pour maitriser totalement l'environnement Windows. 
Des outils complets tels que Microsoft Operation Manager s'appuient sur WMI. 
Bien que developpe en COM et done non en .NET, WMI peut s'utiliser depuis 
une application developpee en Visual Basic 2005 grace a I'espace de noms 
System. Management, qui permet de consulter les informations offertes par WMI 
tout en cachant toute la complexite sous-jacente. 

Vous allez dans cet exemple creer une classe permettant d' afficher des 
informations a propos du ou des processeurs presents dans votre ordinateur. 
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Cela n'est pas possible via l'espace de noms My. Vous allez done vous tournez 
vers l'espace de noms System. Management. 

Pour debuter, creez une classe nommee Processeur. Elle permettra de recuperer 
des informations telles que le fabriquant, le modele, la frequence, la plage 
d'adressage (32 ou 64 bits), ainsi que le nombre de processeurs : 

Imports System. Management 

Public Class Processeur 

Private m_fabri quant As String 
Dim mjnodele As String 
Dim m_frequence As String 
Dim m_adressage As String 
Dim mjiombre As Integer 

Public Property Fabri quant () As String 
Get 

Return m_fabri quant 
End Get 

Set(ByVal value As String) 

m_fabri quant = value 
End Set 
End Property 

Public Property Model e() As String 
Get 

Return mjnodele 
End Get 

Set(ByVal value As String) 

mjnodele = value 
End Set 
End Property 

Public Property FrequenceQ As String 
Get 

Return m_frequence 
End Get 

Set(ByVal value As String) 

m_frequence = value 
End Set 
End Property 

Public Property AdressageQ As String 
Get 

Return njadressage 
End Get 

Set(ByVal value As String) 
njadressage = value 
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End Set 
End Property 

Public Property NombreQ As Integer 
Get 

Return mjiombre 
End Get 

Set(ByVal value As Integer) 

mjiombre = value 
End Set 
End Property 

La classe Processeur permet de representer un processeur via quelques 
caracteristiques implementees a l'aide de proprietes. II ne reste plus qu'a definir 
les valeurs de ces proprietes grace a des objets presents dans I'espace de noms 
System. Management. 

Public Sub New() 

Dim query As New SelectQuery("Win32_Processor") 
Dim search As New ManagementObjectSearcher(query) 
For Each info As ManagementObject In search. Get 
m_fabriquant = info("Manufacturer") .ToString 
mjnodele = info("Name") .ToString 
m_frequence = (CDbl (info("CurrentClockSpeed") 
/ 1000)). ToString & " GHz" 

m_adressage = info("AddressWidth") .ToString & " bits" 

m_nombre = Environment. ProcessorCount 

Next 

search. Dispose() 
End Sub 

End Class 

Extension de I'espace de noms My 

Vous avez dans un premier temps utilise I'espace de noms My pour recuperer 
des informations sur l'ordinateur, telles que le nom du systeme d' exploitation, 
le volume de memoire physique libre. D'autres espaces de noms tels que 
System. Management ont permis d'aller plus loin et de recuperer par exemple des 
informations sur le processeur de l'ordinateur. 

La classe Processeur pourrait etre logiquement rattachee a l'objet Computer 
present dans I'espace de noms My si celui-ci etait extensible. La bonne nouvelle 
est qu'il Test. Vous allez done l'enrichir grace a la classe Processeur. Pour cela, 
creez une nouvelle classe MyComputer. MyComputer est le nom interne de l'objet 
pointe par la propriete Computer. Definissez son espace de noms comme etant 
I'espace de noms My, puis ajoutez une propriete Processeur renvoyant un objet 
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de type Processeur : 

Namespace My 

Friend Class MyComputer 

Private m_processeur As Processeur 
Public Readonly Property ProcesseurQ As Processeur 
Get 

If m_processeur Is Nothing Then 

m_processeur = New Processeur 
End If 

Return m_processeur 
End Get 
End Property 
End Class 
End Namespace 



my. Computer .pro 
With My.C^.^^ 

lfclPr ^ Mouse 

IblFr j. Name 

IfclFr jg< Network 

lblPr Ports 

lblPr ^fj 
End With V ReferenceEquals 
Registry 

End Sub 5creen 

~~ V ToString 

Private Sub t Commun I T( 



< Figure 9-5 : 

Affichage via 
I'lntellisense de la 
propriete Computer 
etendue 



9.4 Afficher des informations 
sur le processeur 

Vous etes a present capable d' afficher les informations sur le processeur. 

Inserez un controle GroupBox puis ajoutez-y cinq controles Label pour afficher 
les informations liees au processeur. Nommez-les 1 bl ProcAdressage, lblProc- 
Fabri quant, lblProcFrequence, lblProcModele, lbl ProcNombre. 

Ajoutez ensuite le code suivant dans l'evenement Load du formulaire pour 
afficher les informations : 

With My. Computer. Processeur 

Ibl ProcAdressage. Text = .Adressage 
lblProcFabri quant. Text = . Fabri quant 
lblProcFrequence. Text = .Frequence 
lblProcModele. Text = . Model e 
lbl ProcNombre. Text = .Nombre 
End With 
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9.5 Creer une vue synthetique 

Une grande partie des outils de surveillance des performances proposent une 
vue synthetique des donnees qu'ils recuperent pour les afficher tout le temps en 
premier plan sur l'ecran de l'utilisateur. Ces vues sont souvent partiellement 
transparentes pour ne pas masquer la ou les fenetres qui se situent en 
arriere-plan afin de ne pas gener l'espace de travail. 

Vous allez done faire de meme pour visualiser le pourcentage du processeur 
occupe, ainsi que le pourcentage de memoire vive occupee, et cela en 
permanence via une fenetre transparente de petite taille. 

En ce sens, creez une nouvelle fenetre que vous appellerez Monitor. Cliquez du 
bouton droit sur votre projet pour afficher le menu contextuel et selectionnez 
l'element de menu intitule Ajouter un nouvel element. Dans la boite de 
dialogue qui s'affiche, selectionnez l'icone Windows Form. 



Ajouter un nouvel element - Moniteur de performances 



Modeles Visual Studio installes 



Classe 
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A Figure 9-6 : Creation d'un nouveau formulaire Windows 

Validez pour debuter la construction du formulaire. Vous vous retrouvez a 
present devant le Concepteur de formulaires propose par Visual Basic 2005 
Express Edition. La fenetre d'affichage devant etre le plus discrete possible, 
vous allez la configurer pour la rendre beaucoup moins imposante que la 
majorite des formulaires qui composent les applications Windows. 

Commencez par supprimer la barre de titre de la fenetre, contenant le nom de 
l'application, son icone ainsi que les boutons systeme de reduction, d'agran- 
dissement et de fermeture de l'application. Ces informations sont inutiles dans 
ce cas. Pour operer la suppression, modifiez la propriete FormBorderStyl e de la 
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fenetre. Cette propriete definit le type de bordure de la fenetre et peut prendre 
plusieurs valeurs : 



Valeurs possibles de la propriete FormBorderStyle 


Valeur 


Description 


None 


Definit une fenetre sans bordure ni barre de titre. Cette valeur 
est rarement utilisee mais elle est pratique pour creer des 
applications qui doivent etre affichees en plein ecran, comme 
un economiseur d'ecran ou une fenetre qui doit etre la plus 
discrete possible. 


FixedSingle 


Definit une fenetre avec une bordure de taille fixe composee 
d'un seul trait. 


Fixed3D 


Definit une fenetre avec une bordure de taille fixe, ayant un 
effet 3D grace a l'utilisation de plusieurs traits. 


FixedDialog 


Definit une fenetre avec une bordure. Cette valeur est 
couramment utilisee pour les boites de dialogue. 


Sizable 


Definit une fenetre redimensionnable par l'utilisateur a l'aide 
de la souris. 


FixedTool Window 


Definit une fenetre de taille fixe, avec une barre de titre 
reduite et une bordure fine. Cette valeur est utilisee pour les 
barres d'outils flottantes. 


Si zableTool Window 


Definit une fenetre que l'utilisateur peut redimensionner, avec 
une barre de titre reduite. Cette valeur est utilisee pour les 
barres d'outils flottantes redimensionnables. 



Vous allez definir cette propriete FormBorderStyle en lui affectant une valeur 
egale a None. 

De plus, pour rendre encore plus discrete cette fenetre, reduisez fortement sa 
taille, definissez une couleur d'arriere-plan qui passe inapercue, et surtout 
activez la transparence en modifiant la propriete Opacity. Opacity permet de 
definir le pourcentage d'opacite de la fenetre, 0 % correspondant a une fenetre 
totalement transparente, et 100 % a une fenetre totalement opaque. Choisissez 
une transparence assez forte pour ne pas gener l'espace de travail, en 
1' occurrence une valeur de 20 %. 

Ajoutez ensuite deux controles ProgressBar. lis permettront d'afficher le 
pourcentage de CPU occupee ainsi que le pourcentage de memoire vive 
occupee. 

■< Figure 9-7 : Exemple de 

I I fenetre synthetique 
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Pour definir cette nouvelle fenetre en tant que formulaire principal de 1' appli- 
cation, vous devez modifier une propriete du projet. Pour cela, cliquez du 
bouton droit sur votre projet dans l'Explorateur de solutions puis selectionnez 
Proprietes. 

Sous l'onglet qui s'affiche, modifiez le formulaire de demarrage et selectionnez 
Monitor. 



Compiler 
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Type d'application : 



(Application Windows 
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< Figure 9-8 

Selection du 
formulaire de 
demarrage 



Ajoutez a present un menu contextuel au formulaire Monitor pour permettre a 
l'utilisateur de quitter l'application et d'afficher la fenetre d' informations 
detaillees creee en debut de chapitre. Pour cela, utilisez un controle Context- 
MenuStrip et inserez deux elements de menu: un pour afficher la fenetre 
detaillee grace a la ligne de code suivante : 



My . Forms . Forml . Show( ) 



et un second pour quitter l'application : 

Private Sub QuitterToolStripMenuItem_Click(ByVal sender 
As System. Object, ByVal e As System. EventArgs) Handles 
QuitterToolStripMenuItem.Cl ick 
Application.Exit() 
End Sub 



Liez a present ce menu contextuel au formulaire en modifiant la propriete 
ContextMenuStrip et en selectionnant le menu que vous venez de creer. 



Deplacement d'une fenetre sans bordure 

La fenetre est a present sans bordure, avec une transparence qui lui permet 
d'etre discrete, mais la suppression de ladite bordure entraine un problems 
epineux : on ne peut plus deplacer la fenetre car la barre de titre est absente. 

II est done necessaire de coder par programmation les deplacements, qui 
s'opereront, non plus via la barre de titre, mais via la surface de la fenetre 
elle-meme. II s'agira d'appuyer sur le bouton gauche de la souris tout en 
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deplacant le pointeur, a la maniere d'un glisser-lacher. Ainsi, les habitudes de 
l'utilisateur ne seront pas troublees. 

Pour ce faire, vous avez besoin de deux evenements : MouseDown, pour stacker 
la position originale de la souris au depart du glisser-lacher, et MouseMove, pour 
deplacer la fenetre en meme temps que la souris. 

Pour stocker la position de depart de la souris, declarez une variable nommee 
m_positionDepart de type Point : 

Dim m_positionDepart As Point 

Dans l'evenement MouseDown du formulaire, initialisez cette valeur : 

Private Sub Monitor_MouseDown(ByVal sender 
As System. Object, ByVal e As 
System. Windows. Forms. MouseEventArgs) 
Handles My Base. MouseDown 
m_positionDepart = e. Location 
End Sub 

Dans l'evenement MouseMove, deplacez la fenetre en modifiant les proprietes 
Left et Top du formulaire : 

Private Sub Monitor_MouseMove(ByVal sender As 
System. Object, ByVal e As 
System. Windows. Forms. MouseEventArgs) 
Handles My Base. MouseMove 

If e. Button = Windows. Forms. MouseButtons. Left Then 

Me. Left += e.X - m_positionDepart.X 

Me. Top += e.Y - m_positionDepart.Y 
End If 
End Sub 

Enregistrer des para metres d'application 

L'utilisateur est a present capable de deplacer la fenetre ou il le souhaite, dans 
un endroit oil elle est le moins genante vis-a-vis de la surface de travail. Le 
resultat est satisfaisant. II reste un probleme a regler pour completer cette 
gestion : la sauvegarde de la position de la fenetre. En effet, des que Ton quitte 
l'application, la position de la fenetre est perdue et l'utilisateur doit la replacer 
manuellement. Ce comportement n'est pas celui que Ton attend d'une appli- 
cation Windows. Vous allez corriger ce probleme de maniere simple, sans ecrire 
une ligne de code, grace a une fonctionnalite offerte par Visual Basic 2005 
Express : les parametres d'application (Application Settings). 
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Pour stocker la position de la fenetre, selectionnez celle-ci, et dans la fenetre 
des proprietes, reperez l'element intitule (Application Settings). Depliez-le pour 
afficher la propriete Location. Cliquez dans la zone de valeur de cette propriete, 
puis sur le lien Nouveau pour definir la valeur, et intitulez-la PositionFenetre. 
En effectuant cela, vous indiquez qu'il faut stocker, dans un fichier de 
ressources propre a l'utilisateur courant, la position de la fenetre dans une 
variable nominee PositionFenetre. 
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< Figure 9-9 : 

Sauvegarde de la 
position de la fenetre 



A present, lorsque Ton quitte 1' application, la position de la fenetre est 
automatiquement memorisee dans un profil lie a l'utilisateur courant (done, s'il 
y a plusieurs utilisateurs, les parametres pourront etre differents). Ce profil sera 
automatiquement charge lors du demarrage de l'application. 



9.6 Check-list 

Dans ce chapitre, vous avez appris a : 

■ recuperer des informations sur le systeme grace aux espaces de noms My 
et System. Management ; 

■ etendre l'espace de noms My ; 

■ utiliser le controle Timer ; 

■ modifier les proprietes des fenetres (suppression de bordure, transpa- 
rence...) ; 

■ deplacer une fenetre sans bordure ; 

■ sauvegarder des parametres d' application. 
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I Client MSN Messenger avec onglets 



Au cours des chapitres precedents, vous avez ecrit plusieurs applications en 
vous servant des bibliotheques de classes de la plateforme .NET et, evidem- 
ment, du code que vous avez ecrit vous-meme. Or, comme avec tout langage de 
programmation, il est possible avec Visual Basic .NET de faire appel a des 
bibliotheques ecrites par des tiers, eventuellement dans d'autres langages pris 
en charge par la plateforme .NET. La bibliotheque DotMSN que vous utiliserez 
dans cette application, par exemple, a ete ecrite en C#. 

Vous utiliserez cette bibliotheque pour ecrire un client capable de se connecter 
au service de messagerie MSN. Cette application sera differente des autres 
clients qui existent deja, car elle ne consistera qu'en une seule fenetre dans 
laquelle vous verrez votre liste de contacts et toutes vos conversations sous la 
forme d' onglets. 

L'application que vous obtiendrez a la fin de ce chapitre vous permettra 
d'echanger des messages avec d'autres clients MSN. Toutefois, sachez que le 
developpement d'un client de messagerie complet n'est pas une tache facile. Le 
but de ce chapitre est de vous mettre sur la bonne voie pour vos projets futurs. 

10.1 Classes et espaces de noms 
utilises 

Comme pour toute application Windows, la plupart des classes dont vous aurez 
besoin se trouvent dans l'espace de noms System. Windows. Forms. 

De plus, les classes de la bibliotheque DotMSN, dont vous aurez besoin pour 
interagir avec les serveurs du service de messagerie, se trouvent dans l'espace 
de noms XihSolutions. DotMSN. 



10.2 Configuration 

Une fois que vous aurez cree un projet de type Application Windows, vous 
devez le configurer pour pouvoir acceder aux classes de la bibliotheque 
DotMSN. 

Commencez par telecharger DotMSN sur le site WWW.xihsolutions.net/DotMSN. La 

version de la bibliotheque utilisee dans ce chapitre est la 2.0. 1 . Bien que le code 
source de cette bibliotheque soit disponible en telechargement, vous n' aurez 
besoin que de la version compilee sous forme de fichier .dll. Enregistrez ce 
fichier dans le dossier racine de votre projet qui se trouve, par defaut, dans le 
repertoire Mes documentsWisual Studio 2005\Projects. 
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^arque 

^ Dossier racine de votre projet 

Lorsque vous creez un nouveau projet avec Visual Basic 2005 Express, tous les 
fichiers sont stockes dans un premier temps dans un repertoire temporaire. 
Vous devez utiliser la commande Enregistrer tout du menu Fichier, ou le 
raccourci clavier fclriH-fMajT+fs], pour enregistrer votre projet a son emplacement 
definitif. 



Malheureusement, le fait d'enregistrer le fichier .dll a la racine de votre projet 
ne suffit pas pour que celui-ci soit pris en compte. Cliquez du bouton droit sur 
le nom de votre projet dans l'Explorateur de solutions et selectionnez la 
commande Proprietes. 
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Figure 1 0-1 : Acceder aux 
proprietes d'un projet 



Dans la fenetre qui s'ouvre, selectionnez l'onglet References a gauche et 
cliquez sur le bouton Ajouter pour ajouter une reference vers la bibliotheque 
DotMSN. Dans la boite de dialogue qui s'ouvre, selectionnez l'onglet Parcou- 
rir. Par defaut, vous vous retrouvez dans le repertoire racine de votre applica- 
tion, dans lequel figure le fichier .dll correspondant a la bibliotheque DotMSN. 
Selectionnez-le et validez (voir Figure 10-2). 

La reference Xi hSol uti ons . DotMSN apparait a present dans la liste de references 
de votre projet. 
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Ajouter une reference 
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▲ Figure 10-2 : Ajouter une reference a un projet 

Pour finir, et pour eviter de devoir saisir le nom complet de l'espace de noms 
a chaque fois que vous souhaitez utiliser une classe de celui-ci, importez-le en 
cochant la case a cote de XihSolutions.DotMSN dans la liste Espaces de noms 
importes. 



Espaces de noms importes : 


XihSolutions.DotMSN 


[ Ajouter une importation utilisateur | 




□ Org 

□ Org.Mentalis 

□ Org.Mentalis, Network 
Org.Mentalis.Network.ProxySocket 
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□ XihSolutions.DotMSN. Core 

□ XihSolutions . DotMSN . DataTransf er 





A Figure 10-3 : Importer un espace de noms 

Fermez l'onglet de configuration de votre projet pour enregistrer les modifica- 
tions. 



10.3 Interface utilisateur 

L'interface utilisateur que vous allez creer consiste en un seul formulaire qui 
contiendra la liste de contacts ainsi que les conversations sous forme d'onglets. 
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III ® 



M- B.j'-jiju' 

Encarta® Instant Answers : Bonjour 



Encarta® Instant Answers 



Envoyer 



Mauriao connecte 



▲ Figure 10-4 : Interface utilisateur terminee 



Formulaire principal 



Le formulaire principal est simple, tout en etant capable de gerer plusieurs 
conversations simultanees avec les contacts MSN. 

Commencez par glisser un controle StatusStrip dans votre formulaire. II 
viendra se placer, automatiquement, en bas de celui-ci. Inserez dans la barre 
d'etat un controle de type Tool Stri pStatusLabel , que vous appellerez Status 
(en modifiant sa propriete (Name)). Videz sa propriete Text afin qu'il n'affiche 
rien. 



A 5tatuslabel 

ED ProgressBar 

71: DropDownButton 

[3 SplitButton 



Figure 10-5 : 

Insertion d'un 
ToolStripStatusLabel 

Inserez dans votre formulaire un TabControl que vous appellerez Conversa- 
tions et supprimez tous ses onglets a l'aide de sa balise active. Ce controle 
viendra se placer en haut a gauche du formulaire. 

A cote du TabControl, glissez un controle ListView qui s'appellera Contacts. 
Changez ses proprietes Multi Select a False, Sorting a Ascending et View a 
Smal I Icon. De cette maniere, vos contacts seront ranges par ordre alphabetique 
et vous ne pourrez en selectionner qu'un seul a la fois. De plus, le fait d'utiliser 
la vue Smal l Icon fait que vous pourrez, a l'avenir, associer une icone a chacun 
de vos contacts, ce que Ton ne fait pas dans cet exemple. 
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Ajoutez un controle TextBox en dessous du TabControl. Appelez-le MonTexte et 
affectez la valeur True a sa propriete Mul ti 1 ine pour pouvoir le redimensionner 
en hauteur et y ecrire des messages qui s'etendent sur plusieurs lignes. A cote 
de ce champ de texte, inserez un controle Button que vous appellerez Envoyer 
et modifiez sa propriete Text afin qu'il affiche cette meme valeur. 

Enfin, inserez deux controles TextBox et un controle Button que vous appellerez 
respectivement Adresse, MotDePasse et Connexion. Vous pouvez aussi inserer 
des controles Label pour identifier les champs de texte si vous le souhaitez. 
Modifiez la propriete Text du bouton afin qu'il affiche OK et changez la valeur 
de la propriete UseSystemPasswordChar du champ MotDePasse a True afin que le 
texte saisi ne soit pas visible. 

Votre interface graphique est maintenant terminee, a l'exception d'un detail : 
vous avez peut-etre remarque qu'il n'y a pas de champ de texte prevu pour 
l'affichage des conversations. 



Controle Dialogue 



Vous devez creer un controle utilisateur pour afficher vos conversations avec 
vos contacts MSN. Pour cela, cliquez du bouton droit sur le nom de votre projet 
dans l'Explorateur de solutions, et choisissez la commande Controle utilisateur 
du sous-menu Ajouter. Appelez votre controle Dialogue. 

Dans votre nouveau controle, inserez une TextBox. Modifiez ses proprietes 
Mul ti 1 i ne et Readonly a True et sa propriete Dock a Fi 1 1 . Ainsi, votre champ de 
texte occupera tout le controle et il ne pourra pas etre modifie par l'utilisateur. 
En revanche, son texte sera toujours accessible grace a sa propriete Text. Pour 
finir, changez sa couleur de fond en modifiant sa propriete BackColor et en lui 
attribuant la valeur Wi ndow. 



Proprietes ▼ P X 

TextBOHl System. Windows. F • 



AutoComplet None 
AutoComplet None 

| | | dow v 



Personnaliser Web System 



I I InactiveBorder 
l | InactiveCaption 
I I InactiveCaptionText 
□ Info 

InfoText 
I I Menu 
I I MenuBai 

MenuMighlight 

MenuText 
I I ScrollBar 

WindowFrame 
WindowText 



Figure 1Q-6 : Selectionner une 
couleur systeme pour le fond d'un 
controle 
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Votre controle utilisateur fera beaucoup plus qu'afficher un simple champ de 
texte, mais les fonctionnalites supplementaires devront etre ajoutees par la suite 
via du code. 



10.4 Realisation 

Maintenant que votre interface graphique est prete a se connecter au service de 
messagerie MSN pour envoyer et recevoir des messages, vous pouvez com- 
mencer a ecrire le code qui utilise les classes de la bibliotheque DotMSN. 

Connexion au service de messagerie 

Vous allez commencer par configurer votre application afin qu'elle se connecte 
au service de messagerie MSN. Pour cela, vous devez afficher le code source 
de votre formulaire principal en appuyant sur la touche (FT) de votre clavier. 

Public Class Forml 

Private Delegate Sub 

UpdateControlTextDelegate(ByVal text As String) 
Private Delegate Sub UpdateControlDelegate() 
Private Delegate Sub 
CreateConversati onTabDel egate ( 
ByVal conversation As Conversation) 

Friend Messenger As Messenger 

Public Sub New() 
' Cet appel est requis par le Concepteur 
Initial i zeComponent () 

Messenger = New MessengerQ 

' Imiter MSN Messenger 

Messenger. Credentials. ClientID = "msmsgs@msninsgr.coni" 

Messenger. Credentials. CI ientCode = "Q1P7W2E4J9R8U3S5" 

AddHandler _ 

Messenger. NameserverProcessor.ConnectionEstabl ished, 
AddressOf NameserverProcessor_ConnectionEstabl ished 

AddHandler Messenger. Nameserver.Signedln, 
AddressOf Nameserver_SignedIn 

AddHandler Messenger. Nameserver.SignedOff , 
AddressOf Nameserver_SignedOff 

AddHandler Messenger. Nameserver.AuthenticationError, 
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AddressOf Nameserver_AuthenticationError 

AddHandler Messenger. ConversationCreated, 
AddressOf Messenger_ConversationCreated 
End Sub 

End Class 

▲ Nouveau constructeur du formulaire principal 

On commence par creer trois delegues. lis serviront a appeler des methodes a 
travers differents threads pour mettre a jour 1' interface graphique de 1' applica- 
tion. Ensuite on cree un objet appele Messenger de type XihSolutions.DotMSN 
.Messenger, qui assurera la communication avec le service de messagerie. 

On cree aussi un constructeur pour le formulaire afin d'initialiser l'objet 
Messenger. II faut configurer les parametres avec lesquels le client va se 
presenter aupres du service de messagerie. Ces parametres permettent d'iden- 
tifier 1' application, et non pas l'utilisateur qui veut se connecter au service. 
Dans cet exemple, on personnifie le client MSN Messenger de Microsoft. 

Si vous souhaitez deployer une application qui se connecte au service de 
messagerie MSN, vous devrez vous procurer vos propres identifiants aupres de 
MSN. 

Enfin, on associe des methodes a certains evenements qui peuvent etre 
declenches par le nouveau client. 

Vous allez ecrire des gestionnaires pour les evenements de base (il ne s'agit pas 
d'une liste exhaustive). 

Gestion des evenements du service 
de messagerie 

Le premier evenement que vous allez gerer est Connect! onEstabli shed. Ce 
n'est pas un evenement de l'objet Messenger, mais de la propriete Nameserver- 
Processor de celui-ci. 

Private Sub NameserverProcessor_ConnectionEstablished( 
ByVal sender As Object, ByVal e As EventArgs) 
Update_Status ("Connecte au serveur") 
End Sub 

A Gestionnaire de I'evenement ConnectionEstablished 

Cet evenement ne semble pas interessant, car il est seulement declenche lors de 
la connexion initiale au serveur du service de messagerie et tout ce qu'il fait est 
de mettre a jour le texte de la barre d'etat pour informer l'utilisateur. 

Or, cette operation est loin d'etre anodine. En effet, lorsque vous demarrez la 
connexion au service, la bibliotheque DotMSN cree un nouveau thread pour ne 
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pas bloquer 1' application. Le gestionnaire etant appele a partir de ce nouveau 
thread, different de celui dans lequel ont ete crees les elements de 1' interface 
graphique, la mise a jour de ces derniers ne peut pas se faire directement a 
partir de celui-ci. 

Vous allez done creer deux methodes dans votre classe : Update_Status et 
Update_Status_Synchro. 

Private Sub Update_Status(ByVal status As String) 
Invoke(New UpdateControlTextDelegate( 
AddressOf Update_Status_Synchro) , New Object() {status}) 
End Sub 

Private Sub Update_Status_Synchro (ByVal status As String) 

Me. Status. Text = status 
End Sub 

A Mise a jour d'un element de I'interface graphique a travers differents threads 

La deuxieme methode sert a mettre a jour la propriete Text du controle appele 
Status et ne requiert pas d'explication supplementaire. 

La premiere methode s'assurera que la mise a jour du controle se fera dans le 
thread approprie. Pour cela, elle fait appel a la methode Invoke en lui passant 
un delegue et un tableau de parametres. 

Le delegue a ete prepare lors des premieres modifications de la classe du 
formulaire principal. II permet l'appel indirect a une methode qui prend une 
chaine de caracteres en parametre. Dans ce cas precis, il s'agit de la methode 
Update_Status_Synchro. La chaine de caracteres a passer sera inseree dans d'un 
tableau d'objets afin que la methode Invoke la transmette a la methode appelee. 

Le meme modele de code sera utilise tout au long du developpement de 
l'application pour mettre a jour les elements de I'interface graphique a travers 
differents threads. 

Vous allez maintenant gerer les evenements Signedln et SignedOff, declenches 
respectivement lorsque le client a authentifie l'utilisateur aupres des serveurs de 
messagerie et lorsque l'utilisateur s'est deconnecte. lis appartiennent a la 
propriete Nameserver de Messenger. 

Private Sub Nameserver_SignedIn(ByVal sender As Object, 
ByVal e As EventArgsT 
Messenger. Owner. Status = PresenceStatus.Onl ine 
Update_Contacts() 

Update_Status (Messenger. Owner. Name & " connecte") 
Update_Bouton("Deco") 
End Sub 

Private Sub Nameserver_SignedOff (ByVal sender As Object, 
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ByVal e As SignedOffEventArgs) 
Messenger. Di sconnect () 
CloseAllTabs() 
Update_Contacts() 
UpdateJStatus ( " Deconnecte" ) 
Update_Bouton("OK") 
End Sub 

▲ Gestion des evenements Signedln et SignedOff 

Dans le premier gestionnaire, on indique que le statut de l'utilisateur authentifie 
est "en ligne", via la propriete Owner de Messenger. Ensuite, on fait appel a des 
methodes auxiliaires, telles que Update_Status, pour mettre a jour l'interface 
graphique. Dans le deuxieme gestionnaire, on fait de meme, sauf que Ton 
deconnecte l'objet Messenger au lieu de changer le statut de l'utilisateur. Voici 
le code des methodes auxiliaires necessaires : 

Private Sub Update_Bouton(ByVal text As String) 
Invoke(New UpdateControlTextDelegate( 
AddressOf Update_Bouton_Synchro) , New ObjectQ {text}) 
End Sub 



Private Sub Update_Bouton_Synchro(ByVal text As String) 

Connexion. Text = text 
End Sub 



Private Sub Update_Contacts() 

Invoke(New UpdateControlDelegate( 
AddressOf Update_Contacts_Synchro) ) 
End Sub 



Private Sub Update_Contacts_Synchro() 
Contacts . SuspendLayout () 
Contacts. I terns. CI ear () 
If Messenger. Connected Then 

For Each Contact As Contact In Messenger. ContactList. All 
Dim item As New ListViewItem 
item. Text = Contact. Name 
item. Tag = Contact 
Contacts . Items .Add (i tern) 

Next 
End If 

Contacts . ResumeLayout () 
End Sub 



Private Sub CloseAllTabsQ 

Invoke (New UpdateControl Del egate ( 
AddressOf CloseAllTabs_Synchro)) 
End Sub 
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Private Sub CloseAl lTabs_Synchro() 

For Each tab As TabPage In Conversations. TabPages 
Conversati ons . TabPages . Remove (tab) 

Next 
End Sub 

A Methodes auxiliaires pour la mise a jour de I'interface graphique 

La methode Update_Bouton est presque identique a Update_Status, sauf qu'elle 
met a jour le texte du bouton appele Connexion. 

La methode Update_Contacts vide la liste Contacts et la remplit, seulement si 
l'objet Messenger est connecte, avec la liste d'utilisateurs contenue dans la 
propriete ContactList de Messenger. Aucune verification du statut de l'utilisa- 
teur n'est faite. On peut la faire en testant la valeur de Contact. Status. Comme 
les contacts sont stockes un a un dans la propriete Tag de chaque element de la 
liste, on peut recuperer l'objet Contact, et pas seulement son nom, lorsque Ton 
voudra initier une conversation avec celui-ci. 

On appelle la derniere methode lorsque l'utilisateur est deconnecte pour iterer 
dans la liste des onglets de conversation ouverts et les supprimer. 

Le dernier evenement lie a la connexion que Ton va gerer est celui qui est 
declenche lorsque les parametres d'authentification sont incorrects : 

Private Sub Nameserver_AuthenticationError( 
ByVal sender As Object, ByVal e As ExceptionEventArgs) 
MessageBox.Show( 

"Verifiez votre adresse e-mail et votre mot de passe.", 
"Erreur d'authentification") 
Messenger . Di sconnect () 
End Sub 

A Gestion de I'evenement AuthenticationError 

II suffit d'afficher un message d'alerte et de deconnecter l'objet Messenger. 
Enfin, on gere I'evenement declenche lorsqu'une conversation est creee : 

Private Sub Messenger_ConversationCreated( 
ByVal sender As Object, 
ByVal e As Conversati onCreatedEventArgs) 
If e. Initiator Is Nothing Then 

Invoke(New CreateConversationTabDelegate( 
AddressOf CreateConversationTab) , 
New Object() {e. Conversation}) 

End If 
End Sub 

A Gestion des nouvelles conversations 
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Cette methode teste s'il s'agit d'une nouvelle conversation en verifiant la 
propriete Initator, qui est differente de Nothing si la conversation est deja 
ouverte. Si c'est le cas, la methode qui cree les onglets de conversation est 
appelee. Une fois de plus, on doit utiliser Invoke ici car CreateConversationTab 
modifie des elements de l'interface graphique. 

Private Sub CreateConversationTab ( 
ByVal conversation As Conversation) 
Dim newTabPage As New TabPage 
Dim newDialogue As New Dialogue(conversation) 

If conversation. SwitchboardProcessor Is Nothing OrElse 

Not conversation. SwitchboardProcessor. Connected Then 

conversati on . Messenger . Nameserver. RequestSwi tchboard ( 

conversati on . Swi tchboard , conversati on .Messenger) 

Threadi ng . Thread . SI eep ( 1000) 
End If 



Dim contacts As New System. Text. StringBuilder 
For Each contact As DictionaryEntry In 
conversati on . Swi tchboard . Contacts 
contacts. AppendFormat("{0} , ", 
CType (contact. Value, Contact) .Name) 

Next 

If (contacts. Length > 2) Then 

contacts. Remove (contacts. Length - 2, 2) 
End If 



newTabPage.Text = contacts. ToString 

newDialogue. Dock = DockStyle.Fill 

newTabPage . Control s . Add (newDi al ogue) 

Conversati ons .TabPages .Add (newTabPage) 
Conversati ons . Sel ectTab (newTabPage) 
End Sub 

A Creation de nouveaux onglets de conversation 



On cree un nouvel objet TabPage, qui correspond a l'onglet que Ton va inserer 
dans le controle Conversations, ainsi qu'un objet Dialogue, le controle 
utilisateur. Le constructeur du controle utilisateur prend une conversation en 
parametre. 

Vous ecrirez ce constructeur dans la section suivante. 
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Ensuite, on verifie l'existence d'un SwitchboardProcessor dans la conversation. 
Cet objet "route" la conversation vers le bon destinataire. S'il n'existe pas, on 
le cree puis on attend 1 seconde avant de s'assurer qu'il a ete initialise 
correctement. 

On peut maintenant iterer dans la liste de contacts associes a la conversation 
pour utiliser leurs noms comme titre de l'onglet grace a la propriete Text de ce 
dernier. 

II ne reste plus qu'a attribuer la valeur Fill a la propriete Dock du controle 
Dialogue afin qu'il occupe tout l'onglet une fois ajoute dans celui-ci. On 
procede a cet ajout juste avant d'ajouter l'onglet dans le controle Conversa- 
tions. 



Controle Dialogue 

Le controle utilisateur Dialogue doit etre modifie pour etre utilise avec 
l'application. En effet, vous allez ecrire du code qui ressemble beaucoup a celui 
que vous avez ecrit pour la classe de la fenetre principale. Voici le code complet 
de la classe Dialogue : 

Public Class Dialogue 

Private Delegate Sub UpdateConversationText( 
ByVal text As String) 

Private m_conversation As Conversation 

Public Sub New(ByVal conversation As Conversation) 
1 Cet appel est requis par le Concepteur 
Initial izeComponent() 

m_conversation = conversation 
AddHandler _ 

conversati on . Swi tchboard . TextMessageRecei ved , 

AddressOf Swi tchboard_TextMessageRecei ved 
End Sub 

Public Readonly Property Conversati on () As Conversation 
Get 

Return m_conversation 
End Get 
End Property 

Public Sub AppendText(ByVal text As String) 
Invoke(New UpdateConversationText( 
AddressOf AppendText_Synch) , New Object () {text}) 
End Sub 
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Private Sub AppendText_Synch(ByVal text As String) 

TextBoxl.AppendText(text) 
End Sub 

Private Sub Switchboard_TextMessageReceived( 
ByVal sender As Object, ByVal e As TextMessageEventArgs) 
AppendText(String.Format("{0} : {1}{2}", _ 
e. Sender. Name, e. Message. Text, vbCrLf)) 
End Sub 

End Class 

▲ Classe Dialogue 

On cree, dans cette classe aussi, un delegue qui facilitera les mises a jour de 
l'interface graphique entre les threads. On ne stocke pas de Messenger dans le 
controle, mais seulement une Conversation, que Ton initialise dans le cons- 
tructeur et que Ton rend accessible grace a une propriete en lecture seule. 

Cette classe propose aussi deux methodes auxiliaires, qui servent a faire les 
modifications de l'interface graphique, la premiere appelant la seconde a l'aide 
de la methode Invoke et du delegue. 

Finalement, on ecrit le gestionnaire d'evenements TextMessageRecei ved de 
l'objet Conversation stocke dans la classe. On utilise les methodes auxiliaires 
pour ajouter dans la TextBox du controle utilisateur les messages recus. 

Maintenant que le controle utilisateur est capable de gerer des conversations, il 
ne reste plus qu'a utiliser des methodes de l'objet Messenger a partir des 
controles de la fenetre principale pour commencer a dialoguer avec les contacts 
MSN. 

Gestion des evenements de la fenetre 
principale 

Bien que votre application sache reagir lorsqu'elle est connectee au service de 
messagerie, elle ne sait pas encore s'y connecter. Vous allez done implementer 
le gestionnaire d'evenements Click du bouton Connexion pour utiliser les 
valeurs des champs Adresse et MotDePasse en vue de l'authentification aupres 
du service. 

Private Sub Connexion_Click (ByVal sender As System. Object, 
ByVal e As System. EventArgs) Handles Connexion. CI ick 
If Not Messenger. Connected Then 
If Adresse. Text. Length > 0 Then 

Messenger. Credentials. Account = Adresse. Text 
Messenger. Credentials. Password = MotDePasse. Text 

Messenger. Connect() 
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Update_Stat us ( " Connexi on..." ) 
End If 

Else 

Messenger . Di sconnect () 
End If 
End Sub 

A Connexion au service de messagerie 

Ce bouton a deux fonctions : si, lorsque l'utilisateur clique dessus, l'objet 
Messenger n'est pas connecte au service, il est configure avec l'adresse e-mail 
et le mot de passe fournis, et connecte ; sinon, il est deconnecte. 

Maintenant que vous etes connecte au reseau, vous voudrez surement initier des 
conversations avec vos contacts. Pour cela, vous double-cliquerez sur un 
contact dans la liste et le gestionnaire d'evenements creera l'onglet approprie : 

Private Sub Contacts_DoubleCl ick(ByVal sender As Object, 
ByVal e As System. EventArgs) Handles Contacts. Doubleclick 
If Contacts. Selectedltems. Count = 1 Then 
Dim contactSelectionne As Contact = 
CType(Contacts.SelectedItems(0) .Tag, Contact) 

If contactSelectionne IsNot Nothing AndAlso 
contactSelectionne. Onl ine Then 
Dim conversation As Conversation = 

Messenger . CreateConversati on () 
conversati on . Invi te(contactSel ecti onne) 
CreateConversati onTab (conversati on) 
End If 
End If 
End Sub 

A Ouverture d'un onglet de conversation 

On verifie qu'un element du ListView Contacts est bien selectionne et on 
recupere l'objet Contact stocke dans sa propriete Tag. Apres avoir verifie que 
le contact est en ligne, on demande a l'objet Messenger de creer une conver- 
sation grace a la methode CreateConversati on, et on invite le contact grace a 
la methode Invite. Enfin, on appelle la methode CreateConversati onTab pour 
creer l'onglet correspondant a la conversation. 

Vous avez prevu un champ de texte et un bouton pour envoyer des messages a 
vos contacts. Vous allez done gerer l'evenement CI ick du bouton Envoyer pour 
envoyer le message au sein de la conversation de l'onglet selectionne. De plus, 
vous allez gerer l'evenement KeyDown du controle MonTexte afin que la touche 
[Entree] serve aussi a envoyer le message. 
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ByVal e As System. EventArgs) Handles Envoyer.Cl ick 




If Conversations. SelectedTab IsNot Nothing And 
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Dim conversation As Conversation = 




dialogue. Conversation 




If Not conversation. SwitchboardProcessor. Connected Then 




conversati on .Messenger .Nameserver. RequestSwi tchboard( 
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End If 




Dim message As New TextMessage(MonTexte.Text) 
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End If 




End Sub 
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Handles MonTexte. KeyDown 




If e.KeyCode = Keys. Enter Then 




Envoyer . Perf ormCl i c k ( ) 




e.SuppressKeyPress = True 




End If 




End Sub 




▲ Gestionnaires charges de I'envoi des messages dans la conversation courante 



Lorsque l'utilisateur clique sur bouton Envoyer, on verifie qu'il y a bien un 
onglet selectionne et que du texte a ete saisi dans le champ MonTexte. Si c'est 
le cas, on recupere le controle Dialogue courant en utilisant la propriete 
Control s de l'onglet selectionne, ainsi que la conversation courante en utilisant 
la propriete de meme nom du controle Dialogue courant. On recourt ensuite a 
la methode SendTextMessage de la propriete Switchboard de la conversation 
pour envoyer le message et Ton met a jour le controle Dialogue avec sa 
methode AppendText. 

Pour permettre I'envoi des messages avec la touche | Entree 1 , on teste simple- 
ment si la touche a ete utilisee en verifiant la valeur de la propriete KeyCode. Si 
c'est le cas, on fait appel a la methode PerformClick du bouton Envoyer pour 
simuler un clic et Ton supprime le retour a la ligne en utilisant la propriete 
SuppressKeyPress. 

Finalement, vous fermerez les conversations que vous ne desirez plus en gerant 
l'evenement Doubled ick du TabControl : 
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Private Sub Conversations_DoubleClick(ByVal sender As System. Object, ByVal e 
As System. EventArgs) Handles Conversations. Doubleclick 
Conversati ons . TabPages . Remove (Conversati ons . Sel ectedTab) 
End Sub 

▲ Fermeture des onglets 

II suffit d'utiliser la mefhode Remove de la collection TabPages pour supprimer 
l'onglet courant, que Ton retrouve grace a la propriete Sel ectedTab. 

Vous disposez desormais d'une application basique vous permettant de dialo- 
guer avec vos contacts MSN. 



10.5 Check-list 

Dans ce chapitre, vous avez appris a : 

■ vous connecter au service de messagerie MSN ; 

■ utiliser des classes d'une bibliotheque tierce ecrite dans un autre langage 
.NET ; 

■ mettre a jour des elements de l' interface graphique a travers differents 
threads ; 

■ instancier et ajouter dynamiquement des controles utilisateurs a votre 
interface graphique. 
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I Explorateur de disques 



Vous allez creer dans ce chapitre un Explorateur de disques. Cet outil vous 
permettra de connaitre, d'un coup d'ceil, les informations concernant vos 
lecteurs de disque, qu'ils s'agissent de lecteur de disque dur, de lecteur CD, de 
lecteur DVD ou encore de lecteur reseau. 

Ce chapitre sera 1' occasion de decouvrir tout ce qui concerne la manipulation 
du systeme de fichiers avec Visual Basic 2005. 



11.1 Classes et espaces de noms 
utilises 

Vous allez utiliser plusieurs espaces de noms importants. 

L'espace de noms My permet la manipulation du systeme de fichiers. 

0^^^Pour en savoir plus sur My, lisez le chapitre Moniteur 
Renvoi de performances. 

System. I0 propose un grand nombre de classes destinees a la manipulation de 
dossiers et de fichiers. 

Vous allez creer une application Windows et forcement utiliser l'espace de 
noms System. Wi ndows . Forms. II contient toutes les classes et structures neces- 
saires a la creation d'interfaces Windows grace a des fenetres et a l'utilisation 
de controles. 



11.2 Lister les lecteurs de I'ordinateur 

Commencez par recuperer la liste des lecteurs presents sur votre ordinateur. 

Avant de debuter, creez un nouveau projet dans Visual Basic 2005 Express 
Edition, et selectionnez le type de projet intitule Application Windows (voir 
Figure ll-l). 

Vous arrivez alors sur votre surface de travail avec le Concepteur de formu- 
laires Windows ouvert sur le formulaire par defaut. 

Listez les lecteurs de votre ordinateur dans un controle ListView. Ce controle 
est exactement le meme que celui utilise par l' Explorateur de fichiers de 
Windows pour afficher la liste des dossiers et fichiers presents dans un dossier 
specifique. ListView permet d'afficher des elements dans plusieurs vues, entre 
autres une vue "grandes icones", une vue "petites icones", une vue "detail" (voir 
Figure 11-2). 
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Nouveau projet 



Types de projets : 



id Visual Basic 


Modeles Visual Studio installes 








Windows 












S- Smart Device 


—a 










Base de donnees 






9 






Starter Kits 
IB Autres langages 
El Autres types de projets 


Application 
Windows 


Btbliotheque de 
classes 


Application 
console 


Bibliotheque de 
controles Wi.., 


Application 
Crystal Reports 


B Guidance Packages 


m 

Application 
Smart Device 










Projet de creation d'une application avec une interface utilisateur Windows 



I Expiorateur de disquej 



A Figure 11-1 : Creation d'application Windows 



S Tous les Windows Forms 



Pointeur 
dbl Button 
0 CheckBox 
a ~ CheckedListBox 
T? ComboBox 
~ 9 DateTimePicxer 
A Label 
A LinkLabel 
= : ListBox 



jj- ListView 



«- MaskedTextBox 



A Figure 11-2 : Controle ListView 
dans la bolte a outils 



Placez un controle ListView sur votre fenetre principale et changez la propriete 
View pour definir son style de vue a Small Icon. 

Le controle ListView a la particularite de pouvoir etre lie a un controle 
ImageLi st. ImageLi st est un controle non visuel, qui permet de stocker une liste 
d'images, par exemple une liste d'icones. Utilise conjointement avec un 
controle ListView ou un controle TreeView, ImageLi st permet de definir 
l'image a afficher pour un element precis contenu dans l'un de ces controles. 

Dans cet exemple, ImageLi st va permettre de stocker une icone de disque dur 
et une icone de lecteur CD, qui seront utilisees lorsque le lecteur correspondra 
a l'un de ces types de supports. 
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Placez done un controle ImageLi st sur votre formulaire. II apparait alors dans 
la zone des controles non visuels. Affichez le smart tag de ce controle grace au 
petit triangle present en haut a droite de celui-ci, pour definir les proprietes des 
differentes images inserees dans ImageLi st (taille, resolution) et ajouter les 
icones correspondant aux lecteurs. 



^arque 
^* Icones 



Si vous ne possedez pas de telles icones, allez sur Internet : de nombreux sites 
comme www.icomania.com, en proposent gratuitement. 



Une fois les images ajoutees au controle ImageLi st, il ne reste plus qu'a lier 
celui-ci au controle ListView precedemment insere sur le formulaire. Pour cela, 
modifiez la propriete Small ImageLi st du controle ListView et selectionnez le 
controle ImageLi st. 

A present, listez la liste des lecteurs. Pour cela, utilisez l'espace de noms My, et 
plus particulierement la propriete FileSystem de l'objet Computer. En effet, 
l'objet FileSystem permet de recuperer des informations sur le systeme de 
fichiers, et notamment la liste des lecteurs presents sur l'ordinateur. Cette liste 
inclut les differents disques durs de votre machine, les lecteurs CD/DVD, les 
lecteurs reseau, ou encore tous les lecteurs connectes occasionnellement, tels 
que les cles USB ou encore les cartes Compact Flash, SD ou MemoryStick. 

La propriete Drives de l'objet FileSystem permet de recuperer la liste des 
lecteurs du systeme. Elle renvoie une liste d'objets Drivelnfo, qui permettent 
de recuperer les proprietes des lecteurs, telles que leur lettre, le nom du volume, 
leur taille, leur type, etc. 

Vous devez ecrire une boucle pour lister les lecteurs. Une boucle For... Each est 
ideale : elle permet d'effectuer une enumeration d'objets dans un tableau ou une 
liste, sans risque de boucle infinie : 

For Each drive As Drivelnfo In 
My . Computer . Fi 1 eSys tern . Dri ves 

Dim imageindex As Integer = 2 
Select Case drive. Dri veType 
Case Dri veType. CDRom 

imageindex = 1 
Case Dri veType. Fixed 
imageindex = 0 
End Select 
If drive.IsReady Then 
1 stDrives. Items. Add(drive. Name & _ 
" [" & drive. Vol umeLabel & "]", imageindex) 
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Dans cette boucle, on selectionne l'index de l'image presente dans le controle 
ImageList en fonction du type de lecteur defini grace a la propriete DriveType, 
puis on ajoute le lecteur trouve dans la liste des elements du controle ListView 
en affichant la lettre du lecteur ainsi que le nom du volume entre crochets. 

Placez-ce code dans l'evenement Load du formulaire. 



yC:\[ACER] ■D:\IKERDATA| 
QE:\ rV)F:\[LB2CFRE_EN 



'J I Jj 



< Figure 11-3 : Liste des lecteurs 



Les differents lecteurs sont a presents lister dans le controle ListView. Vous 
allez afficher les informations detaillees concernant le lecteur selectionne dans 
ListView. 

Pour cela, ajoutez un controle GroupBox, qui permettra de regrouper tous les 
controles d'affichage de donnees liees aux disques, puis sept controles Label 
qui permettront d'afficher la lettre du lecteur, l'espace libre a la disposition de 
l'utilisateur courant, l'espace libre total, la taille totale du disque, le nom de 
volumes du disque, le format de disque et l'etat du lecteur (pret ou non). 
Nommez-les en modifiant leur propriete Name et en affectant respectivement les 
valeurs suivantes : l bl LettreLecteur, lbl EspaceLibre, IblEspaceLibreTotal, 
I bl NomLecteur, lbl FormatLecteur, lblLecteurPret. 

Creez sept autres controles Label permettant d'indiquer a l'utilisateur les 
donnees affichees par les champs precedemment crees. 

Puis, pour finir, ajoutez un controle ProgressBar, qui permettra d'afficher le 
pourcentage d'espace occupe sur le disque. Nommez ce controle prgEspaceOc- 
cupe en changeant sa propriete Name. 

Pour afficher les informations liees au disque selectionne, il est necessaire de 
recuperer le bon objet Drivelnfo renvoye par la propriete Drives de l'objet 
Fi I eSystem. Cela est relativement simple: il suffit de recuperer l'indice de 
1' element selectionne dans la ListView et de l'utiliser comme index dans la 
collection retournee par la propriete Dri ves pour recuperer la bonne instance : 

My . Computer . Fi l eSystem. Dri ves (l stDri ves . Sel ectedlndi ces (0) ) 
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II ne reste plus qu'a ecrire le code d'affichage de donnees dans l'evenement 
Sel ectedlndexChanged du controle ListView pour arriver au comportement 
souhaite : 

Dim espaceLibre As Integer = 0 
Dim espaceLibreTotal As Integer = 0 
Dim espaceTotal As Integer = 0 

If lstDrives.Selectedlndices. Count = 0 Then Exit Sub 

With My. Computer. FileSystem.Drives( 

1 stDri ves . Sel ectedlndi ces (0) ) 

espaceLibre = Math. Round ( 

.Avail ableFreeSpace / (1024 * 1024), 0) 

espaceLibreTotal = Math.Round( 

.Total FreeSpace / (1024 * 1024), 0) 

espaceTotal = Math. Round ( 

.TotalSize / (1024 * 1024), 0) 

IblEspaceLibre.Text = espaceLibre & " Mo" 

lbl EspaceLibreTotal .Text = espaceLibreTotal & " Mo" 

lblFormatlecteur.Text = .DriveFormat 

IblLecteurPret.Text = .IsReady 

IblLettreLecteur.Text = .Name 

lblTailleTotale.Text = espaceTotal & " Mo" 

IblNomLecteur.Text = .VolumeLabel 

prgEspaceOccupe. Value = 

100 - (espaceLibreTotal / espaceTotal) * 100 



Apres s'etre assure qu'un element est bien selectionne en verifiant que la 
propriete Sel ectedlndi ces. Count de la ListView est differente deO, on affiche 
les donnees en modifiant la propriete Text des differents controles Label 
precedemment crees. 

Les differentes tailles etant definies en octets, il faut les diviser par 1 024 au 
carre pour avoir un resultat en megaoctets. Un petit arrondi est necessaire pour 
ne pas avoir de decimales. On recourt en ce sens a la methode Round de la 
classe Math. 

Enfin, pour afficher le pourcentage de disque occupe, on calcule le pourcentage 
d'espace libre que Ton retranche a 100. 



End With 



Format : 



C:\ 
FAT32 
ACER 
True 
2319 Mo 
2319 Mo 
45438 Mo 



Mom 



Lecteur pret 
Espace libre 



Espace Libre total 
Taille totale : 




■< Figure 11-4 : Affichage des 
informations sur le lecteur selectionne 



174 • Le guide du codeur 



Lister les dossiers 

11.3 Lister les dossiers 

Vous allez a present lister les dossiers du lecteur selectionne. Commencez par 
creer un controle Li stBox qui contiendra la liste des differents dossiers inclus 
dans la racine du lecteur selectionne. 

Nommez ce controle l stFol ders et placez-le en dessous des controles que vous 
avez auparavant crees pour afficher la liste des lecteurs et les informations 
afferentes. 

Utilisez ensuite l'espace de noms My comme precedemment. Mais au 
lieu d'exploiter la propriete Drives, qui permet de recuperer la liste des 
lecteurs, employez la methode GetDi rectories, qui renvoie une collection 
de String. II faut done ecrire quelques lignes de code dans l'evenement 
Sel ectedlndexChanged du controle ListView, qui liste les lecteurs, pour modi- 
fier la liste des dossiers des que l'utilisateur selectionne un autre lecteur : 

Dim cu_drive As Drivelnfo 
cu_drive = 

My .Computer . Fi l eSystem. Drives (I stDri ves . Sel ectedlndi ces (0) ) 
I stFol ders. I terns. CI ear () 

For Each directory As String In 

My .Computer. Fi l eSystem. GetDi rectori es (cu_dri ve.Name) 
Dim dirinfo As New DirectoryInfo(di rectory) 
l stFol ders . Items . Add (di ri nf o . Ful l Name) 

Next 



On enumere la liste des differents dossiers grace a une boucle for... each. Puis, 
pour chaque dossier trouve, on ajoute son nom complet dans le controle 
ListBox en utilisant la methode Add de la collection Items, qui contient la liste 
des differents elements affiches, apres avoir supprime tous les elements de la 
liste en appelant la methode CI ear. 



C:\Windows SharePoint Services Developer Resources * 
C:\2007 Office System Developer Resources 
C:\Acer 
C:\Book 

C:\Documents and Settings 
C dotnetf) 
C:\i386 
C jnetpub 
C MSOCache 
C Program Files 
C:\Recyded 
C .Sysinfc 

C .System Volume Information 
C:\Temp 
C:\VALUEADD 
C:\WINDOWS 
C:\Windows Vista Beta 2 Touchdown Material 



Figure 11-5 : 

Affichage de la liste 
des dossiers 
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11.4 Afficher des informations 
sur les dossiers 

Vous allez a present afficher des informations sur le dossier selectionne. Vous 
recupererez le nombre de fichiers presents dans le dossier (sous-dossiers 
inclus), la taille du dossier en cumulant la taille de tous les fichiers qu'il 
contient. Vous afficherez la taille en megaoctets dans un controle Label et le 
pourcentage d'espace occupe par le dossier par rapport a la taille totale du 
disque selectionne grace a un controle ProgressBar. 

Commencez par ajouter un controle GroupBox, qui permettra de regrouper les 
informations liees au dossier selectionne. Ajoutez deux controles Label, le 
premier nomme l bl Fi l esCount, pour afficher le nombre de fichiers inclus dans 
le dossier, et le second nomme l bl Si zeFol der, pour afficher la taille du dossier. 

Ajoutez ensuite un controle ProgressBar nomme prgFolderSize, pour afficher 
le taux d' occupation. 



Infos Lecteur — 

Lettre : 
Format : 
Nom : 

Lecteur pret : 
Espace libre : 
Espace Libre total : 
Taille totale : 



Ibl Lettre Lecteur 

IblFormatlecteur 

Ibl Nom Lecteur 

IblLecteurPret 

IblEspaceLibre 

Ibl EspaceLibre Total 

IblTailleTotale 




▲ Figure 11-6 : Interface de I'application 

Lister les differents fichiers presents dans un dossier et dans ses sous-dossiers 
n'est habituellement pas une tache evidente : il est en effet necessaire d'ecrire 
une fonction recursive pour parcourir toute l'arborescence. Bien heureusement 
et encore une fois, Visual Basic 2005 vous vient en aide. Un simple appel de 
la methode GetFiles permet d'effectuer la recherche : 
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Dim files As ReadOnlyCol lection (Of String) 
files = My. Computer. FileSystem.GetFiles( 
e. Argument. ToString, 

Fi 1 elO . SearchOpti on . SearchAl 1 SubDi rectori es , "*,*") 

II ne reste plus qu'a parcourir ce tableau pour cumuler les tailles des fichiers et 
calculer le nombre de ces fichiers : 

For Each file As String In files 
m_cuPathSize += 

My . Computer . Fi 1 eSystem. Get Fi 1 elnf o (f i 1 e) . Length 
m_cuPathFilesCount += 1 

Next 

Pour afficher convenablement la taille totale des fichiers, il est preferable de 
convertir la taille trouvee, qui est en octets, en megaoctets, voire en gigaoctets 
si cela est possible. 1 Ko etant egal a 1 024 octets, un petit calcul suffit pour 
afficher le volume total : 

m_cuPathSize = 

Math. Round (m_cuPathSize / (1024 * 1024), 0) 

Dim driveSize As Double 

driveSize = My. Computer. FileSystem.Drives( 

lstDrives.SelectedIndices(0)).TotalSize J (1024 * 1024) 
prgFolderSize. Value = 
m_cuPathSize / driveSize * 100 
If m_cuPathSize / 1024 > 1 Then 

m_cuPathSize = m_cuPathSize / 1024 

IblSizeFolder.Text = 

Math. Round (m_cuPathSize, 1) & " Go" 

Else 

IblSizeFolder.Text = m_cuPathSize & " Mo" 
End If 

Cela donne au final : 

Private Sub lstFolders_SelectedIndexChanged( 
ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Handl es 1 stFol ders .Sel ectedlndexChanged 
Me. Cursor = Cursors. WaitCursor 
Dim files As ReadOnlyCol lection(0f String) 
files = My. Computer. FileSystem.GetFiles( 
e. Argument. ToString, 

Fi 1 elO . SearchOpti on . SearchAl 1 SubDi rectori es , "*.*") 

For Each file As String In files 
m cuPathSize += 
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My . Computer . Fi 1 eSystem. Get Fi 1 elnf o (f i 1 e) . Length 




m ruPflthFi 1 p^Pount += 1 




Next 




III LUraLMOIZ.C 
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End If 




lbl FilesCount.Text = m cuPathFilesCount 




IstFolders. Enabled = True 




Me. Cursor = Cursors. Default 




m cuPathSize = 0 




m cuPathFilesCount = 0 




End Sub 





Si vous testez a present 1' application, vous vous rendez compte que tout 
fonctionne a une exception pres : durant le parcours d'un dossier consequent, 
l'interface est figee. Vous vous en apercevez si vous tentez de deplacer la 
fenetre. 

Cela est normal : le traitement est effectue dans le meme thread que celui utilise 
par l'interface graphique ; durant l'execution d'une procedure qui prend du 
temps, le thread est occupe et ne peut done plus repondre aux actions de 
l'utilisateur. 



11.5 Composant BackgroundWorker 

La solution de ce probleme est relativement simple : il suffit de creer un autre 
thread pour lancer le traitement. La mise en ceuvre d'un thread supplementaire 
est aisee. Mais Visual Basic 2005 propose un composant qui simplifie encore 
plus la manipulation : BackgroundWorker (voir Figure ll-7). 

Le composant BackgroundWorker est un controle non visuel, qui permet de 
lancer un traitement dans un thread separe. Le code execute dans ce nouveau 
thread devra etre place dans l'evenement DoWork du composant, le code de 
finalisation pouvant etre ecrit dans l'evenement RunWorkerCompl eted 
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- Composants 

1^ Pointeur 



| -y, BackgroundWorkeT" 



tTI DrectoryEntry 
^1 DrectorySearcher 
,J ErrorProvidef 

EventLog 
^y] FileSys tern Watcher 
(n) HelpProvider 

ImageList 
J" MessageQueue 
I PerformanceCounter 
Process 




< Figure 11-7 : Composant 
BackgroundWorker dans la boTte a 
outils 



X Pour modifier les proprietes des controles de la fenetre 

Le traitement present dans I'evenement DoWork etant effectue dans un thread 
different de celui utilise pour le dessin de I'interface graphique, il est impossible 
d'acceder directement aux differents controles de la fenetre pour en modifier 
les proprietes. Vous devrez adapter votre code pour faire appel a votre 
interface graphique depuis I'evenement RunWorkerCompleted, ou alors vous 
devrez utiliser les delegues. 



En accord avec la precedente remarque, le code reorganise present dans 
I'evenement DoWork correspond a ceci : 

Private Sub BackgroundWorkerl_DoWork( 
ByVal sender As System. Object, ByVal e As 
System. ComponentModel .DoWorkEventArgs) 
Handles BackgroundWorkerl. DoWork 

Dim files As ReadOnlyCol lection (Of String) 
files = My. Computer. FileSystem.GetFiles( 
e. Argument. ToString, 

Fi l elO . SearchOpt i on . SearchAl I SubDi rectori es , "*.*") 
For Each file As String In files 
m_cuPathSize += 

My . Computer . Fi l eSystem. Get Fi l elnf o (f i l e) . Length 
m_cuPathFilesCount += 1 

Next 
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m_cuPathSize = 
Math. Round (m_cuPathSize / (1024 * 1024), 0) 

End Sub 

Voici le code d'acces a l'interface graphique present dans l'evenement RunWor- 
kerCompl eted : 

Private Sub BackgroundWorkerl_RunWorkerCompleted( 
ByVal sender As System. Object, ByVal e As 

System. ComponentModel .RunWorkerCompletedEventArgs) Handles 
BackgroundWorkerl . RunWorkerCompl eted 
Dim driveSize As Double 
driveSize = My. Computer. FileSystem.Drives( 

lstDrives.SelectedIndices(0)).TotalSize J (1024 * 1024) 
prgFolderSize. Value = m_cuPathSize / driveSize * 100 
If m_cuPathSize / 1024 > 1 Then 

m_cuPathSize = m_cuPathSize / 1024 

IblSizeFolder.Text = Math. Round (m_cuPathSize, 1) & " Go" 

Else 

IblSizeFolder.Text = m_cuPathSize & " Mo" 
End If 

lbl FilesCount.Text = m_cuPathFilesCount 
IstFolders. Enabled = True 
Me. Cursor = Cursors. Default 
m_cuPathSize = 0 
m_cuPathFilesCount = 0 
End Sub 

L' application est a present fonctionnelle et l'interface graphique ne se fige plus 
lors de longs traitements. 
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Infos Lecteur 

Lett re : C:\ 
Format : FAT32 
Norn ACER 
Lecteur pret : True 
Espacelibre : 2318 Mo 
Espace Libre total : 231 8 Mo 
Taille totale : 45438 Mo 


<l 1 ► 








: 
: 
: 
: 


\ Windows SharePoint Sen/ices Developer Resources 

\2007 Office System Developer Resources 

\Acer 

\Book 






Infos Dossier 
Nbfichiers: 10334 




7. 


I 


Taille : 5.3 Go 


C:\dotnetfx 

C:\i3BG 

C:\inetpub 

C:\MSOCache 

C:\Program Fibs 

C:\Recycied 

C:\Systnfo 

CASystem Volume Information 

C:\Temp 

C:\VALUEADD 

C:\WINDOWS 

C:\Windows Vista Beta 2 Touchdown Material 


1 



A Figure 11-8 : Resultat final de I'application 



11.6 Check-list 

Dans ce chapitre vous avez appris a : 

■ manipuler les lecteurs, dossiers et fichiers ; 

■ utiliser le composant BackgroundWorker pour effectuer des traitements dans 
un thread separe ; 

■ utiliser le controle Listview et le lier a un controle ImageList. 
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Navigateur Internet 



Vous allez a present creer votre propre navigateur Internet. Cela est pratique si 
vous souhaitez disposer de votre propre outil personnalise, qui sera plus adapte 
a votre utilisation ou a celle de votre entourage. Vous allez done creer les bases 
d'un navigateur pleinement fonctionnel bien que simplifie, qui aura pour 
originalite de proposer la navigation par onglet. Vous allez egalement imple- 
menter quelques fonctionnalites bien utiles si vous souhaitez mettre en place un 
controle parental : le stockage des sites visites dans une base de donnees, ainsi 
que le blocage de certaines URL, qui seront done inaccessibles aux utilisateurs 
du navigateur. 

12.1 Classes et espaces de noms 
utilises 

Vous allez devoir utiliser principalement trois differents espaces de noms : 

■ System. Windows. Forms, pour la manipulation des formulaires et des 
controles ; 

■ System. Data, pour la gestion de donnees stockees dans la base de 
donnees ; 

■ System. IO, pour la manipulation de fichiers. 

12.2 Configuration 

En plus d' utiliser Visual Basic 2005 Express Edition, vous allez exploiter SQL 
Server 2005 Express Edition. Cet outil est un systeme de gestion de bases de 
donnees (SGBD) gratuit propose par Microsoft. II s'agit en fait du moteur du 
SGBD phare du geant de Redmond avec quelques limitations au niveau de la 
taille des bases de donnees, de la memoire utilisee, du nombre de processeurs 
pris en charge, etc. 

Vous pouvez telecharger cet outil en version francaise a l'adresse suivante : 
www.microsoft.com/france/msdn/vstudio/express/sqlexpress.mspx. 

II ne s'agit que du moteur de gestion de bases de donnees. II n'est done livre 
avec aucun outil d' administration permettant de creer et de modifier les 
differentes bases de donnees que vous souhaitez gerer. 

Vous avez cependant deux solutions pour gerer vos bases de donnees. La 
premiere est de recourir aux fonctionnalites offertes par Visual Basic 2005 
Express Edition afin d'effectuer toutes vos operations courantes, et la seconde 
est de telecharger un outil additionnel appele SQL Server Management Studio 
Express, disponible gratuitement mais uniquement en anglais a l'adresse 
http://go.microsoft.com/fwlink/7Linkld = 65110. 
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12.3 Interface utilisateur 

L'interface de votre navigateur Internet est relativement simple. Afin de la 
realiser, vous allez vous inspirer de celle proposee par Microsoft Internet 
Explorer, tout en lui ajoutant les fonctionnalites citees precedemment. Le 
formulaire se compose principalement de deux barres d'outils (la premiere pour 
les boutons de navigation, et la seconde pour la barre d'adresse). Afin de creer 
ces deux barres d'outils, il faut ajouter deux controles Tool Strip. Lorsque vous 
les placez sur votre formulaire, vous pouvez constater qu'elles sont automati- 
quement disposees en haut de la fenetre. II suffit alors de cliquer sur ces barres 
d'outils afin d'y ajouter differents controles tels que des boutons (le plus 
courant), des separateurs de groupe, des labels, ou encore des TextBox. 



Pointeur 




^ ContextMenuStrip 




MenuStrip 




I StatusStrip 




ToolStrip 


'_' ToolStripContainer 




- Donnees 


Tool 


Pointeur 
$ DataSet 


Versi 
.NET 


J DataGridView 


Foun 
I'mtei 


tup BindingSource 
' >^ BindingNavigator 


nomt 
depa 
au m 


ReportViewer 





■< Figure 12-1 : Controles ToolStrip 
dans la boTte a outils 



La premiere barre d'outils propose differentes possibilites de navigation a 
l'utilisateur. Placez-y done, pour debuter, cinq boutons correspondant aux 
actions Precedent, Suivant, Arreter, Actualiser et Page de demarrage. Intro- 
duisez ensuite un separateur de groupe suivi d'un bouton pour afficher 
l'historique, lui-meme suivi d'un autre separateur de groupe. Proposez a present 
a l'utilisateur d'imprimer la page courante grace a un bouton Imprimer. Pour 
completer cette premiere barre d'outils, vous allez ajouter une fonctionnalite 
absente du navigateur de Microsoft : la recherche rapide. Ajoutez une Textbox 
ainsi qu'un SplitButton et modifiez la propriete Alignment de ces deux 
controles afin de definir sa valeur egale a Right. Ajoutez a present deux 
elements de menu au Spl i tButton que vous avez ajoute et definissez leur 
propriete Text a Google et MSN. Modifiez egalement la propriete CheckOnCl ick 
de ces deux elements : cela permettra de gerer automatiquement l'etat coche ou 
non des elements sans ecrire aucune ligne de code. 



ooa in a €) 



r 



A Figure 12-2 : Barre d'outils du navigateur 
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Ajoutez a present les controles au second Tool Strip. Pour cela, introduisez un 
controle Tool Stri pTextBox qui servira de barre d'adresse, un controle ToolS- 
tripSpl itButton qui permettra a l'utilisateur d'afficher le site web correspon- 
dant a l'adresse saisie sous l'onglet courant ou sous un nouvel onglet. Terminez 
ensuite par deux Tool Stri pButton, le premier pour creer un nouvel onglet et le 
second pour fermer, supprimer l'onglet courant. 

II ne reste plus qu'a ajouter un seul et unique controle pour terminer l'interface 
de l'application : un TabControl. Lorsque vous l'inserez sur le formulaire, le 
designer de Visual Basic 2005 Express Edition cree automatiquement deux 
onglets, qui sont des controles TabPage. Supprimez-les en modifiant la propriete 
TabPages du controle TabControl ou en cliquant sur le lien Supprimer l'onglet 
dans la fenetre des proprietes. II est en effet inutile de garder des onglets sur le 
controle TabControl puisque vous allez implementer une gestion dynamique 
qui va permettre a l'utilisateur de gerer lui-meme les onglets comme il le 
souhaite. 

L'interface est a present terminee. 




▲ Figure 12-3 : Interface finale de l'application 



12.4 Realisation 

Passons a present au developpement de l'application. Vous allez apprendre dans 
la suite de ce chapitre a gerer des onglets dynamiquement et a acceder a une 
base de donnees SQL Server 2005 Express. 
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Gestion dynamique des onglets 

Pour ajouter des onglets contenant un controle WebBrowser necessaire a 
l'affichage d'une page web, vous devez creer dynamiquement des controles et 
les ajouter au controle TabControl de votre formulaire. Cette gestion dynami- 
que est assez simple a mettre en place meme si elle introduit quelques 
complexites que nous aborderons par la suite. La cle pour creer dynamiquement 
des controles est de les ajouter aux controles parents existants (un formulaire, 
un TabControl...) afin de les inclure dans 1' arborescence des controles de la 
fenetre et de pouvoir les gerer correctement. Cet ajout se fait generalement 
grace a la propriete Controls d'un controle. Dans le cas d'un controle 
TabControl, il faut utiliser la propriete TabPages, qui permet d'acceder direc- 
tement a la collection des onglets d'un TabControl. 

La creation dynamique d'onglets incluant un controle WebBrowser peut done se 
faire via ce code : 

Private Sub CreerOnglet(ByVal url As String) 
Dim newTabPage As New TabPage 
Dim newWebBrowser As New WebBrowser 
newWebBrowser.Dock = DockStyle.Fill 
AddHandler newWebBrowser. Navigated, 

AddressOf Browser_Navi gated 
newWebBrowser. Navigate (url) 
newTabPage. Control s. Add (newWebBrowser) 
TabControl 1 . TabPages .Add (newTabPage) 
TabControl 1 . Sel ectTab (newTabPage) 
End Sub 

La procedure CreerOnglet permet de creer un onglet affichant le site web 
correspondant a l'URL passee en parametre de cette procedure. 

La premiere ligne de ce code permet d'instancier un controle TabPage repre- 
sentant un onglet. On cree ensuite un controle WebBrowser et on modifie sa 
propriete Dock afin d' adapter la taille du controle navigateur dynamiquement en 
fonction de la taille de la fenetre. La quatrieme ligne de cette procedure permet 
de gerer dynamiquement l'evenement Navigated du controle WebBrowser cree 
dynamiquement. En effet, comme vous creez vous-meme vos controles durant 
l'execution du programme, il est impossible de modifier leurs proprietes grace 
a la fenetre de proprietes de Visual Basic 2005 Express Edition et de gerer les 
evenements automatiquement comme on peut le faire d'habitude. II faut done 
par programmation refaire tout ce que l'environnement de developpement 
permet de realiser de maniere "visuelle". La gestion des evenements peut se 
faire grace au mot-cle AddHandler. II permet de lier un evenement, dans ce cas 
l'evenement Navigated qui est declenche lorsque le chargement d'une page est 
termine, a une fonction, dans cet exemple Browser_Navi gated. On definit ce 
lien en creant un pointeur de fonction grace au mot-cle AddressOf. 
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Cet evenement est done gere grace a une methode appelee Browser_Navi gated, 
qui permet de modifier le titre de l'onglet en fonction du titre de la page 
chargee. 

Private Sub Browser_Navi gated ( 
ByVal sender As System. Object, 
ByVal e As _ 

System. Windows. Forms. WebBrowserNavigatedEventArgs) 
Dim cu_browser As WebBrowser 
cu_browser = sender 

cu_browser. Parent. Text = cu_browser.DocumentTitle 
End Sub 

On recupere simplement le controle Browser qui a declenche 1' evenement grace 
au parametre sender de la fonction. On change la propriete Text du controle 
parent du controle Browser qui, dans cette application, est forcement un 
controle TabPage correspondant a un onglet, en lui affectant la propriete 
DocumentTitle du controle WebBrowser. Cette propriete retourne le titre du 
document charge, e'est-a-dire le titre de la page web chargee par le controle. 

La suite de la procedure est assez simple a comprendre. On appelle la methode 
Navigate du controle WebBrowser afin de charger l'URL choisie et Ton ajoute 
les differents controles aux controles parents afin que l'arborescence soit 
correcte et que tout fonctionne parfaitement. 

Pour tester ce code, il ne reste plus qu'a l'appeler dans 1' evenement Load du 
formulaire : 

Private Sub Forml_Load (ByVal sender As System. Object, 
ByVal e As System. EventArgs) Handles MyBase.Load 

CreerOnglet( "about: home") 
End Sub 

Ces lignes creent un premier onglet qui affiche la page de demarrage de votre 
navigateur des le chargement de la fenetre (et done de l'application). 

Afin de completer cette gestion d'onglets, vous pouvez aj outer du code dans 
l'evenement cl i ck des deux derniers boutons de la deuxieme barre d'outils. Ces 
boutons servent respectivement a ajouter un onglet et a supprimer l'onglet 
courant. Le code correspondant est relativement simple : 

Private Sub ToolStripNouvelOnglet_Click( 
ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Handl es Tool Stri pNouvel Ongl et . Cl i ck 

CreerOngl et ( "about : home" ) 
End Sub 



188 • Le guide du codeur 



Realisation 



Private Sub Tool Stri pButtonSupprOnglet_Cl ick( 
ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Handl es Tool Stri pButtonSupprOngl et.Cl ick 

If TabControll.SelectedTab IsNot Nothing And _ 
TabControl l.TabPages. Count > 1 Then 
TabControl 1 . TabPages . Remove ( 
TabControl 1 . Sel ectedTab) 

End If 
End Sub 

Le seul point d' explication necessaire concerne le code correspondant au 
bouton de suppression de l'onglet courant. On teste l'existence d'un onglet 
selectionne et Ton verifie que Ton a bien plus d'un onglet present dans le 
controle TabControl. On supprime ensuite simplement l'onglet selectionne 
grace a la methode Remove de la collection de TabPages du TabControl . 

II faut a present etre capable de manipuler le controle Browser courant afin de 
pouvoir fournir les fonctionnalites de navigation. Creer une fonction permettant 
de recuperer ce controle courant est done une solution pertinente et le code 
necessaire pour realiser cela est assez simple : 

Private Function GetActiveBrowserQ As WebBrowser 

Return TabControl 1 . Sel ectedTab . Control s (0) 
End Function 

Cette fonction recupere le premier controle enfant de l'onglet selectionne. 
Comme dans cette application chaque onglet ne contient qu'un controle 
WebBrowser, cette fonction renvoie le controle WebBrowser de l'onglet selec- 
tionne. 

Vous pouvez done a present manipuler le controle WebBrowser de maniere 
simple et effectuer toutes les operations de navigation necessaires grace aux 
methodes GoBack, GoForward, Stop, Refresh, GoHome, ShowPrintDialog. 

Private Sub Tool Stri pButtonBack_Cl ick( 
ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Handl es Tool Stri pButtonBack . Click 
GetActi veBrowser. GoBack () 

End Sub 

Private Sub Tool Stri pButtonPrevious_Cl ick ( 
ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Handl es Tool Stri pButtonForward .Click 
GetActi veBrowser. GoForward () 

End Sub 
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Private Sub ToolStripButtonStop_Click( 
ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Handl es Tool Stri pButtonStop .Click 

GetActi veBrowser . Stop () 
End Sub 

Private Sub Tool Stri pButtonRefresh_Cl ick( 
ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Handl es Tool Stri pButtonRef resh .Click 

GetActi veBrowser . Refresh () 
End Sub 

Private Sub Tool Stri pButtonHome_Cl ick( 
ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Handl es Tool Stri pButtonHome .Click 

GetActi veBrowser. GoHome() 
End Sub 

Private Sub ToolStripButtonPrint_Click( 
ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Handl es Tool Stri pButtonPri nt . CI i ck 

GetActi veBrowser . ShowPri ntDi al og () 
End Sub 

De plus, afin d'avoir une meilleure ergonomie, il serait pertinent d'activer ou 
non les boutons Precedent et Suivant si la realisation de ces actions est 
possible. Pour ce faire, vous pouvez ajouter deux lignes de code dans 
l'evenement Sel ectedlndexChanged : 

Private Sub TabControl l_Sel ectedlndexChanged (_ 
ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Handl es TabControl 1 . Sel ectedlndexChanged 
ToolStripButtonBack. Enabled = 
GetActi veBrowser. CanGoBack 
Tool Stri pButtonForward . Enabl ed = 
GetActi veBrowser. CanGoForward 

End Sub 

Le fonctionnement de base de votre navigateur est a present defini. 
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Voyons maintenant comment gerer la fonctionnalite de recherche. Vous allez 
proposer a l'utilisateur de rechercher simultanement dans plusieurs moteurs de 
recherche. Cette fonctionnalite n'existe dans aucun autre navigateur. Elle va 
etre mise en place simplement. Vous avez precedemment cree un Tool Strip 
SplitButton permettant de selectionner le ou les moteurs de recherche que 
souhaite utiliser l'utilisateur. 

II suffit done a present de rechercher quels elements sont selectionnes et de 
creer de nouveaux onglets pour chaque recherche afin de permettre a l'utilisa- 
teur de rechercher simultanement dans plusieurs moteurs (dans cet exemple 
Google et MSN). 

Private Sub Tool Stri pSplitButtonSearch_ButtonClick(_ 
ByVal sender As System. Object, 
ByVal e As System. EventArgs) 
Handl es Tool Stri pSpl i tButtonSearch . ButtonCl i ck 
If GoogleTool Stri pMenuItem. Checked Then 
CreerOnglet("http://www. google. com" + 

"/search?q=" + Tool Stri pTextBoxSearch. Text) 

End If 

If MSNToolStripMenuItem. Checked Then 

CreerOnglet(" http://search.msn.fr" + _ 
"/results. aspx?q=" + 
Tool Stri pTextBoxSearch . Text) 

End If 
End Sub 




.jnjxj 



IP 



r 



Google 



MSN 



A Figure 12-4 : Recherche multimoteur 
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Gestion des raccourcis clavier 

Afin d'ameliorer l'ergonomie de 1' application, il est preferable de proposer 
differents raccourcis clavier a l'utilisateur. Le plus simple pour implementer 
manuellement des raccourcis clavier simples, comme la validation avec la 
touche | Entree) , est d'ecrire du code dans l'evenement KeyDown des controles. Par 
exemple, la procedure suivante lance la recherche lorsque l'utilisateur appuie 
sur [Entree) dans la zone de texte correspondant a la recherche situee dans la 
premiere barre d'outils. 

Private Sub Tool Stri pTextBoxSearch_KeyDown( 
ByVal sender As System. Object, 
ByVal e As System. Windows. Forms. KeyEventArgs) 
Handl es Tool Stri pTextBoxSearch . KeyDown 
If e.KeyCode = Keys. Enter Then 

Tool Stri pSpl i tButtonSearch_ButtonCl i ck 
(sender, Nothing) 

End If 
End Sub 

L' exemple suivant permet de faire de meme avec la barre d'adresse et d'ouvrir 
un nouvel onglet si l'utilisateur appuie sur la combinaison de touches [ Ctrl ) +[T|. 

Private Sub ToolStripTxtUrl_KeyDown( 
ByVal sender As System. Object, 
ByVal e As System. Windows. Forms. KeyEventArgs) 
Handl es Tool Stri pTxtUrl . KeyDown 

If e.KeyCode = Keys. Enter Then 

Tool Stri pSpl i tButtonGo_ButtonCl i ck 
(sender, Nothing) 

End If 

If e.KeyCode = Keys.T And e. Control Then 

CreerOngl et (Tool Stri pTxtUrl . Text) 
End If 

End Sub 

Controle parental 

Voyons a present comment ajouter des fonctionnalites de controle parental. 

Pour commencer, vous allez stocker tout l'historique des visites dans la table 
d'historique. Cette table comprend trois champs: id_url, de type Biglnt et 
auto-incremente, url , de type VarChar et qui a une longueur de 255 caracteres, 
et date_visite, de type DateTime. 
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Voici le script SQL qui cree la base de donnees ainsi que la table : 

USE [master] 
GO 

/****** Object: Database [Navigateur] 

Script Date: 06/26/2006 06:12:11 ******/ 
CREATE DATABASE [Navigateur] ON PRIMARY 
( NAME = N 1 Navigateur 1 , 

FILENAME = N' C:\Program Files\Microsoft SQL 

Server\MSSQL.l\MSSQL\DATA\Navigateur.mdf , 
SIZE = 3072KB , MAXSIZE = UNLIMITED, 
FILEGROWTH = 1024KB ) 
LOG ON 

( NAME = N'NavigateurJog 1 , 

FILENAME = N' C:\Program Files\Microsoft SQL 

Server\MSSQL . l\MSSQL\DATA\Navi gateurj og . 1 df 1 , 

SIZE = 1024KB , MAXSIZE = 2048GB , 

FILEGROWTH = 10%) 
COLLATE French_CI_AS 
GO 

EXEC dbo.sp_dbcmptlevel @dbname=N' Navigateur' , 
@new_cmptlevel=90 

GO 

IF (1 = FULLTEXTSERVICEPROPERTY ( 1 IsFul 1 Textlnstal 1 ed 1 ) ) 
begin 

EXEC [Navi gateur] . [dbo] . [sp_f ul 1 text_database] 
@action = 'enable' 



end 










GO 










ALTER 


DATABASE 


[Navigateur] 


SET 


ANSI_NULL_DEFAULT OFF 


GO 










ALTER 


DATABASE 


[Navigateur] 


SET 


ANSIJULLS OFF 


GO 










ALTER 


DATABASE 


[Navigateur] 


SET 


ANSI_PADDING OFF 


GO 










ALTER 


DATABASE 


[Navigateur] 


SET 


ANSI_WARNINGS OFF 


GO 










ALTER 


DATABASE 


[Navigateur] 


SET 


ARITHABORT OFF 


GO 










ALTER 


DATABASE 


[Navigateur] 


SET 


AUT0_CL0SE OFF 


GO 










ALTER 


DATABASE 


[Navigateur] 


SET 


AUTO_CREATE_STATISTICS ON 


GO 










ALTER 


DATABASE 


[Navigateur] 


SET 


AUTOJHRINK OFF 


GO 










ALTER 


DATABASE 


[Navigateur] 


SET 


AUTO_UPDATE_STATISTICS ON 


GO 










ALTER 


DATABASE 


[Navigateur] 


SET 


CURSOR_CLOSE_ON_COMMIT OFF 


GO 










ALTER 


DATABASE 


[Navigateur] 


SET 


CURSOR_DEFAULT GLOBAL 


GO 
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ALTER 


DATARASF 


TN^ui n^f purl 


SET 


GO 








ALTER 


DATARASF 


Liiqv lyuLcui j 


SET 


GO 








ALTER 


DATARASF 

un i nunj i_ 


TN^ui natpurl 

|_i>ta v i vjqlcui j 


SET 


GO 








ALTER 


DATABASE 


[Navigateur] 


SET 


GO 








ALTER 


DATABASE 


[Navigateur] 


SET 


GO 








ALTER 


DATABASE 


[Navigateur] 


SET 


AUTO UPDATE STATISTICS ASYNC 


GO 









ALTER DATABASE [Navigateur] SET 

DATE_CORRE LAT 1 0N_0PT I M I ZAT I ON OFF 

GO 

ALTER DATABASE [Navigateur] SET TRUSTWORTHY OFF 
GO 

ALTER DATABASE [Navigateur] SET 
ALL0W_SNAPSH0T_IS0LATI0N OFF 

GO 



GO 

ALT 

GO 

ALT 

GO 

ALT 

GO 

ALT 

GO 



USE [Navigateur] 
GO 

/****** Object: Table [dbo] . [Historique] 

Script Date: 06/26/2006 06:12:43 ******/ 
SET ANSI_NULLS ON 
GO 

SET QUOTEDJDENTIFIER ON 
GO 

CREATE TABLE [dbo] . [Historique] ( 

[id url] [bigint] IDENTITY(l.l) NOT NULL, 
[url] [nvarchar] (255) COLLATE French_CI_AS NOT NULL, 
[date_visite] [datetime] NOT NULL, 
CONSTRAINT [PKHistorique] PRIMARY KEY CLUSTERED 

( 

[id_url] ASC 

)WITH (PADJNDEX = OFF, IGNORE_DUP_KEY = OFF) ON [PRIMARY] 
) ON [PRIMARY] 



DATABASE 


[Navigateur] 


SET 


PARAMETERIZATION SIMPLE 


DATABASE 


[Navigateur] 


SET 


READ_WRITE 


DATABASE 


[Navigateur] 


SET 


RECOVERY SIMPLE 


DATABASE 


[Navigateur] 


SET 


MULTIUSER 


DATABASE 


[Navigateur] 


SET 


PAGEJERIFY CHECKSUM 


DATABASE 


[Navigateur] 


SET 


DB_CHAINING OFF 
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Afin d'executer ce script, demarrez SQL Server Management Express, 
connectez-vous en cliquant sur le bouton Connect dans la boite de dialogue qui 
s'ouvre. 

Cliquez ensuite sur le bouton New Query et recopiez le script SQL precedent. 
Validez en cliquant sur le bouton Execute pour que la base de donnees ainsi 
que la table d'historique soient creees. 
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▲ Figure 12-5 : SQL Server Management Studio Express 

II est maintenant necessaire d'ecrire le code qui permet de se connecter a la 
base de donnees et d'inserer les URL saisies dans la barre d'adresse. 

Afin de creer la couche d'acces aux donnees, vous aller definir une classe 
intitulee HistoriqueDAO. Elle contiendra une methode statique nominee Inser- 
tlntoHistorique, qui prendra en parametre une chaine contenant l'URL qui 
sera inseree dans l'historique. 

La connexion a une base de donnees se fait a l'aide d'une brique du Framework 
.NET nommee ADO .NET. ADO .NET propose differentes classes permettant 
de manipuler des donnees. Plusieurs d'entre elles sont specifiques au systeme 
de gestion de bases de donnees. Dans ce cas, vous allez utiliser une base SQL 
Server. Vous devez done exploiter les classes presentes dans le namespace 
System. Data . Sql CI i ent. 

La manipulation de bases de donnees peut paraitre compliquee au premier 
abord, mais nous allons proceder par etapes. 
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Pour manipuler des donnees presentes dans une base de donnees, il faut 
commencer par creer une connexion a cette base. Pour ce faire, ADO .NET 
propose la classe Sql Connection. Elle permet d'etablir des connexions a des 
serveurs et a des bases SQL Server. Cette classe Sql Connection a deux 
proprietes importantes : la propriete ConnectionString, qui permet de definir la 
chaine de connexion a utiliser afin de se connecter a une base de donnees, et la 
propriete State, qui permet de connaitre l'etat de la connexion (a savoir 
ouverte, fermee...). 

La chaine de connexion est primordiale. Toute erreur dans la creation de 
celle-ci empechera le code de fonctionner. Les chaines de connexion permettant 
de se connecter a une base de donnees SQL Server 2005 Express peuvent 
s'ecrire de differentes manieres. Dans ce cas, on definit trois parametres : 

■ Data Source : permet de definir le serveur SQL Server 2005 Express qui 
heberge la base de donnees. Dans ce cas, on specifie la machine locale 
grace a l'operateur ., et 1' instance de la base qui, par defaut, se nomme 
SQLEXPRESS. 

■ Initial Catalog : permet de definir la base de donnees qui sera utilisee 
par la connexion. 

■ Integrated Security : permet de definir le fait que Ton souhaite utiliser 
une authentification Windows, et non SQL. 

La classe Sql Connection a egalement deux methodes importantes : Open, qui 
permet d'ouvrir la connexion, et CI ose, qui permet de la fermer. 

Ainsi, l'ouverture d'une connexion a une base SQL Server 2005 Express peut 
se faire ainsi : 

Dim myconnection As New SqlConnection 
myconnecti on. ConnectionString = 

"Data Source=.\SQLEXPRESS;Initial Catalog=" _ 

"Navi gateur; Integrated Securi ty=True; " 
myconnecti on. Open () 

Bien evidemment, ce code est susceptible de lever une exception puisque 
l'ouverture de la connexion peut echouer. Vous devez done utiliser un bloc 
Try...Catch afin de creer vos connexions. 

Maintenant que vous savez creer une connexion a une base, vous devez etre 
capable d'executer des requetes SQL. En ce sens, ADO .NET propose une 
classe nommee Sql Command. Elle permet d'executer des requetes SQL pour 
inserer des donnees dans une table, les modifier, les supprimer et les recuperer. 

La premiere manipulation a faire lorsque Ton souhaite utiliser un objet 
Sql Command est d'attacher cet objet a une connexion existante. II faut en effet 
que la requete SQL soit executee sur une connexion, et non "dans le vide". Vous 
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devez done modifier sa propriete Connection afin de selectionner une connexion 
valide et ouverte. 

Vous devez en outre modifier la propriete CommandText afin de definir la requete 
SQL a executer: Select, Insert, Update ou Delete. II s'agit simplement 
d'ecrire une requete SQL valide. 

Si vous souhaitez passer des parametres dans votre requete, comme dans cet 
exemple, vous devez ajouter le prefixe @ a vos parametres. L'utilisation de la 
methode AddWi thVal lie de la propriete Parameters permet ensuite d'ajouter les 
valeurs de ces parametres assez facilement : il suffit d'indiquer le nom du 
parametre dont il faut modifier la valeur et ladite valeur. 

Apres avoir initialise toutes ces donnees importantes, il ne reste plus qu'a 
executer la requete a l'aide de la methode ExecuteNonQuery. 

Le code d'insertion d'URL dans l'historique est le suivant : 

Imports System. Data 

Imports System. Data. SqlClient 

Public Class HistoriqueDAO 

Public Shared Sub InsertIntoHiston'que(_ 
ByVal url As String) 
Dim myconnection As New Sql Connection 
myconnection.ConnectionString = 

"Data Source= . \SQLEXPRESS ; In i ti al Catalog=" _ 
"Navigateur; Integrated Securi ty=True; " 

Try 

myconnection. Open () 
Dim cmdlnsert As New Sql Command 
cmdlnsert. Connection = myconnection 
cmdlnsert. CommandText = "insert into " 

"Historique (url, date_visite) " 

"values (@url ,@date_visite) " 
cmdlnsert. Parameters. AddWithValue 

("Purl", url) 
cmdlnsert. Parameters. AddWithValue 

("@date_visite", Date. Now) 
cmdlnsert. ExecuteNonQuery () 
Catch sql ex As Sql Exception 

MsgBox("Impossible de stocker l'url " 

"dans la base de donnees", 

MsgBoxStyl e . Excl amati on , " Erreur" ) 
Catch ex As Exception 

MsgBox("Une erreur non geree est survenue " + 

ex. Message, MsgBoxStyl e. Exclamation, 

"Erreur") 

Final ly 

If myconnection. State = ConnectionState.Open 
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Then 

myconnecti on . CI ose () 
End If 
End Try 
End Sub 
End Class 

Votre application est a present terminee et fonctionnelle. 



12.5 Checklist 

Voici les concepts et les fonctionnalites presentes dans ce chapitre : 

■ creer et gerer dynamiquement des controles ; 

■ se connecter et recuperer des informations d'une base de donnees SQL 
Server ; 

■ utiliser le controle WebBrowser ; 

■ creer des barres d'outils dans des applications Windows. 
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Vous allez decouvrir dans ce chapitre ce qu'est RSS et comment creer des pages 
web permettant de consulter des flux RSS de maniere simple. 



9 Flux RSS 

Les flux RSS (Really Simple Syndication) sont une nouvelle maniere de consulter 
les sites web de facon rapide. lis existent depuis quelques annees et sont 
incontournables. 



er 
nt 



Plus besoin d'utiliser votre navigateur pre- 
fere et de charger les sites web que vous 
aimez un par un : vous avez a present la 
possibilite de telecharger le contenu de ces 
sites web (news, articles...) et de les consul- 
ter en local s'ils proposent des flux RSS. 

Un flux RSS est un document XML qui regroupent les informations importan- 
tes proposees par un site web pour lister des news, des articles, etc. 

Voici un exemple de flux RSS raccourci afin que vous compreniez la logique. 

<?xml version="1.0" encoding="utf-8" ?> 

<?xml -styl esheet type="text/xsl " 

href ="http://bl ogs.developpeur.org/rss.xsl " 

media="screen"?> 

<rss version="2.0" 

xmlns:dc="http://purl .org/dc/elements/1.1/" 

xmlns:slash="http://purl .org/rss/l.O/modules/slash/" 
xmlns:wfw="http://wel lformedweb.org/CommentAPI/"> 
<channel> 
<title>Patrice Lamarche</title> 
<1 i nk>http : //bl ogs . devel oppeur.org/patri ce/def aul t . aspx 
</l ink> 

<description>Des infos sur WinFX, .net 2, etc. 
</description> 

<dc : 1 anguage>f r- FR</dc : 1 anguage> 

<generator>Cornmuni tyServer 2.0 (Build: 60217.2664) 
</generator> 

<item> 

<title>Et un de plus !</title> 

<1 i nk>http : //bl ogs . devel oppeur.org/patri ce/archi ve/ 

2006/07 /02/nomi nati on_mvp . aspx</l i nk> 

<pubDate>Sun, 02 Jul 2006 17:15:00 GMT</pubDate> 

<guid 

isPermaLink="false">7d6e5d3c-61cc-4264-bc3a-a336023fcec4:22073</guid> 
<dc : creator>patri ce</dc : creator> 




< Figure 1 3-1 : 

Icone RSS affichee 
sur les pages web 
proposant des flux 
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<slash:cornments>13</slash:comments> 
<coimients> 

http : //bl ogs .devel oppeur.org/patri ce/cormients/22073 . aspx 
</comments> 

<wfw:commentRss> 
http : //bl ogs . devel oppeur.org/patri ce/ 
commentrss.aspx?PostID=22073</wfw:commentRss> 
<description> 

L'ete commence bien ! 
</description> 
<category domai n=" http : //bl ogs . devel oppeur.org/patri ce/ 
archive/category/1235.aspx">Perso</category> 
</item> 
<i tem> 

<title>[Session] Développement 
avec Windows Presentation Foundation</title> 

<1 ink>http://bl ogs .devel oppeur.org/patrice/archi ve/ 
2006/06/21/wpf_windows_vista_evenement_asp_php 
_codes_sources.aspx</l ink> 

<pubDate>Wed, 21 Jun 2006 11:50:00 GMT</pubDate> 

<guid 

isPermaLink="false">7d6e5d3c-61cc-4264-bc3a-a336023fcec4:21766</guid> 
<dc : creator>patri ce</dc : creator> 
<sl ash : comments>0</sl ash : comments> 
<comments> 

http://blogs.developpeur.org/patrice/corrments/21766.aspx 
</comments> 

<wfw: commentRss>http : //bl ogs . devel oppeur . org/ 

patrice/commentrss.aspx?PostID=21766</wfw:commentRss> 

<description> 

Je vous en ai parle lors de mon precedent post, 

j'ai eu 1 'occasion de donner une presentation du 

devel oppement sur Windows Vista avec Windows 

Presentation Foundation lors de l'evenement 

CodeS-SourceS/ASP-PHP . net . 

Je vi ens d'uploader les slides en ve...<img src= 
"http : //bl ogs .devel oppeur. org/aggbug .aspx?PostID=21766" 
width="l" height="l"> 
</description> 

<category domain="http://blogs. developpeur.org/ 

patri ce/archi ve/category/1 189 . aspx">Mes Sessi ons 

</category> 

</i tem> 

</channel> 

</rss> 

Un flux RSS est done bien un document XML regroupant des informations dans 
des balises item. 



Le guide du codeur • 201 



Aggregateur RSS 

Chaque element du flux est represents par une balise item, elle-meme incluse 
dans une balise channel qui represente l'ensemble du flux. Chaque balise item 
contient un ensemble de balises definissant l'information grace a plusieurs 
caracteristiques. 



Balises les plus importantes 


Nam de balise 


Description 


title 


Contient le titre de l'information. 11 s'agit en general d'une 
chaine de caracteres ne contenant pas d' information de 
formatage. 


1 1 nK 


Definit le lien de la page contenant l'information. 11 s'agit 
done du lien qu'il faudra suivre si Ton souhaite avoir plus de 
details dans le cas ou l'auteur ne syndique que le resume. 


pubDate 


Definit la date de publication de l'information. 


guid 


Definit de maniere unique l'information. 


comments 


Lien pointant vers la page contenant les proprietes. 


description 


Balise contenant l'information elle-meme. Contient souvent 
des balises HTML encodees afin de formater l'information, 
d'y placer des liens, etc. 


category 


Definit la ou les categories auxquelles est rattachee 
l'information. 



13.1 Realisation 

Afin de creer une page web capable de proposer ce genre de flux et done 
d'afficher de maniere intuitive un document XML, vous devez commencer par 
creer une source de donnees, puis utiliser un controle d'affichage pour afficher 
les donnees fournies. Cette operation est appelee "databinding". 

ASP .NET 2 propose plusieurs types de sources de donnees : 

■ Sql DataSource permet de fournir des donnees en provenance de bases de 
donnees SQL relationnelles comme des bases de donnees SQL Server, 
Oracle, DB2, etc. 

■ AccessDataSource permet de recuperer des donnees issues de bases de 
donnees Microsoft Access. 

■ ObjectDataSource permet de fournir des donnees disponibles sous forme 
d'objets. 

■ Xml DataSource permet de fournir des donnees disponibles sous forme de 
document XML. 
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SiteMapDataSource permet de fournir des donnees representant l'arbores- 
cence du site web. 



- Donnees 



1^ Pointeur 
—I GridView 
DataList 
—I DetailsView 
—I FormView 
Repeater 
j SqlDataSource 
.jp AccessDataSource 
L ^ ObjectDataSource 



XmlDataSource 



LJ|j SiteMapDataSource 



M Figure 13-2 : Controles Sources 
de donnees dans la borte a outils 



Vous allez devoir utiliser un controle Xml DataSource afin de recuperer des 
donnees issues d'un flux RSS, puisqu'un flux RSS est un document XML. 

Pour cela, rendez-vous dans la boite a outils, affichez la categorie Donnees et 
inserez un controle Xml DataSource sur votre surface de travail. 

Lorsque vous 1' inserez sur le formulaire web, cliquez sur le smart tag du 
controle (le petit triangle en haut a droit du cadre gris) pour ouvrir une boite de 
dialogue permettant de definir ses differentes proprietes. 



Configurer la source de donnees - XmlData Sou reel 



? x 



Specifier le fichier de donnees XML a utiliser comme source de ce controle, Vous pouvez 
eventuellement specifier d'autres fichiers a utiliser pour modifier les donnees XML avant que le controle 
ne les utilise. 

Fichier de donnees : 

|!it1p://www.asp.net/modules/art^ Parcourir . . . 

Fichier de transformation : 



Un fichier de transformation decnt la mamere dont la structure du fichier XML doit etre converge en 
structure differente. 

Expression XPath : 

|rss/channe item 

Une expression XPath vous permet de filtrer les donnees du fichier XML et de retourner uniquement un 
sous-ensemb e du fich er. 



Annuler 



▲ Figure 1 3-3 : Saisie des proprietes du controle XmlDataSource 

Cette boite de dialogue permet de definir le fichier de donnees a utiliser, 
e'est-a-dire le document XML qui va servir de source de donnees. Ce document 
peut etre un fichier present sur votre disque dur, ou disponible sur Internet et 
accessible via une simple URL. Dans ce dernier cas, ASP .NET va automati- 
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quement telecharger le document pour que vous puissiez le manipuler grace au 
controle Xml DataSource. C'est done cette option que vous allez choisir. 

Pour debuter et a des fins de test, vous pouvez utiliser un flux RSS propose par 
la version francaise du site www.asp.net developpe par Microsoft, et qui enumere les 
differents articles techniques en francais traitant d'ASP .NET: www.asp.net/modules/ 
articleRss.aspx?count=5&mid = 66. 

Vous pouvez egalement definir un fichier de transformation. XML est en effet 
un standard qui est accompagne d'autres standards indissociables : 

■ XSD permet de definir des schemas pour definir la structure d'un 
document XML 

■ XSL permet de transformer un document XML en un autre document 
XML respectant un autre schema. 

■ XPath est un langage de requete qui permet de naviguer au sein d'un 
document XML. 

Le fichier de transformation attendu est done un fichier XSL. II peut servir a 
transformer un document XML en un document XHTML, lisible par des 
navigateurs. Ce parametre etant facultatif, vous allez vous en passer et definir 
la mise en forme et la mise en page directement au sein du controle d'affichage 
des donnees. 

Vous pouvez egalement definir une expression XPath. Cette requete va etre 
executee par le controle Xml DataSource pour recuperer le document XML. 

Ici, vous souhaitez uniquement afficher les differents posts du flux RSS et vous 
allez done recuperer uniquement le contenu des differentes balises item. Pour 
ce faire, vous devez definir une requete XPath de la forme rss/channel /item. 

Le code genere par le designer de Visual Basic 2005 Express Edition doit done 
ressembler a cela : 

<asp : Xml DataSource ID="Xml DataSourcel " 
runat="server" DataFile= 

"http://www.asp.net/inodules/articleRss.aspx?count=5&micl=66" 
XPath="rss/channel/i tem"x/asp:Xml DataSource> 

Vous devez a present utiliser un controle d'affichage de donnees afin d'afficher 
les donnees fournies par ce controle Xml DataSource. 

Vous pouvez par exemple utiliser un controle RepeaterXE Repeater. Ce 
controle permet d'afficher une liste d'elements et de definir la maniere de 
1' afficher. 
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It Pointeur 
_l GridView 
J DataList 
— j DetafcView 
— I Form View 
| Repeater 
_ j SqIData Source 
.p AccessDataSource 
. Jg ObJectDataSource 

XmCataSource 
[ jt-. SiteMapDataSource 
J] ReportViewer 



<4 Figure 13-4 : Controle Repeater 
dans la boTte a outils 



Placez-donc un controle Repeater sur votre formulaire et definissez la source de 
donnees utilisee par ce controle a l'aide du smart tag du controle. 





Lie aux donnees ■ 

Choisir la source de donnees : aiilnMciB«ni«=M » 

<Ue aux donnees 


Lie aux donnees 

Lie aux donnees 


Configurer la source de donnees. . , 
Actualiser le schema 


Lie aux donnees 

\Lie aux donnees 
Lie aux donnees 
\Lie aux donnees 
Lie aux donnees 

Lie aux donnees 





Figure 1 3-5 : 

Definition de la source 
de donnees du 
controle Repeater 



Pour definir la maniere d'afficher les donnees, vous devez vous rendre dans la 
source HTML de la page et personnaliser manuellement le controle Repeater. 

Le Repeater offre la possibilite de definir des templates. Ces templates peuvent 
contenir du code HTML ainsi que du code ASP .NET "inline". 

L'exemple suivant utilise trois types differents de templates : 

■ Un HeaderTempl ateXE HeaderTemplate permet de definir ce qui va etre 
affiche en en-tete de liste. 

■ Un ItemTempl ateXE ItemTemplate permet de definir ce qui va etre affiche 
pour chaque element. 

■ Un FooterTempl ateXE FooterTemplate permet de definir ce qui va etre 
affiche en pied de liste. 

II est done possible de personnaliser a loisir l'affichage des donnees, en creant, 
comme dans cet exemple, un tableau contenant les differents posts du flux RSS. 

<asp:Repeater ID="Repeaterl" runat="server" 
DataSourceID="Xml DataSourcel"> 
<HeaderTempl atextabl e border= " 1 "> 
</HeaderTempl ate> 
<ItemTemplate> 
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<trxtd style="background-color:#ffff99"> 
<strong> 

<a href="<%#XPath("link")%>"><%#XPath("title")%></a> 
</strongxbr /> 

<font face="Verdana" size="2"xix%#XPath("description") %x/i> 

</font> 

</tdx/tr> 

</ItemTemplate> 

<FooterTempl ate> 

</table> 

</FooterTemplate> 
</asp:Repeater> 





Lie anx donnees 




Lie aux donnees 


Lie aux donnees 


Lie aux donnees 


Lie anx donnees 


Lie aux donnees 


Lie aux donnees 


Lie aux donnees 


Lie aux donnees 


Lie aux donnees 


'kmlDataSource - Xm 


DataSource 1 



A Figure 13-6 : Rendu du controle 
Repeater en mode Design 



Lorsque vous executez votre page web, elle doit afficher le flux RSS de la 
version francaise du site ASP .NET. 



Les differentes strategies de gestion de la session HTTP en ASP.NET 

ASP.NET met a votre disposition tout un panel d'options vous permettant de gerer la session de 
maniere la plus efficace possible en fonction de vos besoins. II vous appartient ensuite de choisir 
celle qui corresponds le mieux a vos attentes en terme de performances mais aussi en terme de 
simplicite d'administration. 

Formnlaire et controle ntilisatenr. an pas vers la rentilisation 

Lors d'un developpement de projet web nous nous sommes tous retrouve au moins une fois dans la 
situation ou nous avions une page d'adjonction de donnees ainsi qu'une page de modification. Les 
problemes commencent a survenir lors de la maintenance de /'application. Que va t-il se passer 
lorsque nous devrons editer le formulaire d'adjonction ? II y a de fortes chances pour que nous 
soyons egalement contra'tnt de modifier celui de modification. N'est-ce pas un travail inefftcace que 
d'avoir deux formulaires quasi tdentiques a maintenir separement ? Ne vaudrait-il pas mieux 
disposer d'un seul et meme formulaire charge de realiser ces deux operations ? Nous allons essayer 
de repondre a ces questions en fondant notre solution sur la puissance du Framework .NET ainsi 
que sur les concepts objets. 

Les controles sen eurASP.NET 

ASP.NET revolutionne les formulaires de nos pages Web avec les WebForms pouvant etre utilises 
par le serveur pour generer des pages de maniere dynamique. Vous allez devoir vous separer des 
elements input, pour ce que fan appelle les controles serveur. Ceux-ci presentent une simplicite 
presque exemplaire d'utilisation done pas de panique :) 

LeYiewState en ASP.NET 

Le View/State est un systeme de maintien de la persistance des donnees ajoute dans le 
Framework .NET pour les pages ASP.NET. Ainsi dans chaque page ASP.NET ou I'on a un formulaire, il 
existe un objet particulier que je vais essayer de presenter maintenant. 
S'eqniper pour ASP.NET 

Afin de realiser nos projets, ASP.NET necessite /'installation de plusieurs outils sur votre poste 
comme le .NET Framework, un moteur de base de donnees et bien sur un environnement de 
developpement. Voyons comment les installer. Microsoft mettant a notre disposition certains outils 
gratuitement, nous pouvons nous lancer dans I'ASP.NET sans aucun frais :) 



▲ Figure 1 3-7 : Rendu de la page web 



206 • Le guide du codeur 



Realisation 



1 



Charger un flux RSS manuellement 

Le flux RSS est pour le moment defini de maniere statique puisque vous avez 
indique en mode Design l'URL du flux RSS a charger. II est bien evidemment 
preferable de laisser l'utilisateur selectionner le flux qu'il souhaite consulter. En 
ce sens, vous avez le choix entre deux manieres de proceder. 

Pour debuter, vous allez proposer a l'utilisateur de saisir dans une zone de texte 
l'URL du flux RSS qu'il souhaite visualiser. Pour cela, ajoutez une TextBoxXE 
TextBox nomme txtUrl ainsi qu'un bouton permettant de charger le flux saisi : 

Protected Sub btnLoadUrl_Cl ick(ByVal sender As Object, 
ByVal e As System. EventArgs) Handles btnLoadUrl .CI ick 
XmlDataSourcel.DataFile = txtUrl .Text 

End Sub 

Vous allez a present permettre a l'utilisateur de stocker ses flux RSS favoris 
dans un fichier XML. Ce fichier XML sera ensuite charge dans un controle 
DropDownLi stXE DropDownList grace a un controle Xml DataSource de la meme 
maniere que precedemment. 



P 

XmlDataSource 



^Charger | 



XmlDataSource2 



Figure 1 3-8 : 

Interface de 
chargement manuel 

Le fichier XML est cree de la maniere suivante. Libre a l'utilisateur d'ajouter 
autant de flux RSS qu'il souhaite. Pour creer un nouveau fichier XML, cliquez 
du bouton droit sur votre projet web et selectionnez la commande Ajouter un 
nouvel element. Dans la boite de dialogue qui s'affiche, selectionnez l'icone 
Fichier XMLXE Fichier XML et nommez votre fichier Abonnements.xml. 



II :i 



n — n — i — i s — i — s 3 

Web Form Page maitre Controle Page HTML Service Web Classe Feuille de style 
utilisateur Web 

m a i s i a ii 

Classe Rcrter de Fkrter XM. Schema XML Fichief texte Fichier de Base de 

fappiicati. . , configurati.. . ressources donnees SQL 

M s ^ a i s 

DataSet Gestionnaire Plan de site Fichier VBScript Web Form Rapport Rapport Crystal 

genenque Mobile 



I Fichier XML vide 
Norn : | Abonnementstxn 

Langage ; | Visual Basic 



t[ I - Placer le code dans un fichier distinct 
I Selectionner la page maitre 



Ajouter I Annuler 



▲ Figure 13-9 : Creation du fichier XML 
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<?xml version="1.0" encoding="utf-8" ?> 
<abonnements> 

<f 1 ux url =http : //bl ogs . devel oppeur.org/patri ce/rss . aspx 
titre="Blog Patrice Lamarche Member of Wygteam"> 
</fl ux> 

<f 1 ux url =http : //bl ogs . devel oppeur.org/tonio/rss . aspx 
titre="Blog Antoine Griffard Member of Wygteam"> 
</fl ux> 

<f 1 ux url =http : //bl og . devel oppez . com/xml srv/rss2 . php?bl og=26 
titre="Blog Jean Marc Rabillou"> 
</fl ux> 

<f 1 ux url =http : //bl og .maddO . com/feed/ 
titre="Blog Mauricio Diaz Orlich" ></flux> 
</abonnements> 

Pour charger ce fichier XML dans le controle DropDownLi st, il suffit de proceder 
comme precedemment, en utilisant un controle Xml DataSource. 

<asp:XmlDataSource ID="XmlDataSource2" runat="server" 

•» DataFile="~/Abonnements.xml " XPath="abonnements/flux"> 

</asp : Xml DataSource> 

<asp: DropDownLi st ID="ddlAbonnements" 

runat="server" AutoPostBack="True" 

DataSourceID="XmlDataSource2" DataTextField="titre" 

DataVal ueFi el d="url "></asp : DropDownLi stxbr /> 



II ne reste plus qu'a charger le flux RSS selectionne : 

Protected Sub ddlAbonnements_SelectedIndexChanged( 
ByVal sender As Object, ByVal e As System. EventArgs) 
Handles ddlAbonnements.SelectedlndexChanged 
XmlDataSourcel.DataFile = ddlAbonnements.SelectedValue 
End Sub 



Votre aggregateur de flux RSS est termine. 
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A Figure 13-10 : Rendu final 
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13.2 Check-list 

Dans ce chapitre, vous avez appris : 

■ ce qu'est le format RSS, a le lire manuellement et a comprendre son 
interet ; 

■ a integrer des informations provenant d'autres sites web directement dans 
vos pages ; 

■ a utiliser des flux XML comme source de donnees grace au controle 
Xml DataSource ; 

■ a utiliser les controles Repeater et DropDownList. 
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Check-list 222 



I Creation d'un gadget Live.com 



Internet a pris recemment une nouvelle tournure avec l'avenement du Web 2.0. 
Le Web 2.0 est un terme marketing designant une nouvelle vague de sites web. 
Ces derniers possedent plus de dynamisme que les sites traditionnels grace a la 
technologie Ajax, mise a la mode par Google, et s'adaptent mieux a l'utilisateur 
en lui permettant de personnaliser l'interface, d'incorporer les services qu'ils 
offrent dans d'autres sites web, etc. 

Microsoft a bien entendu pris la vague du Web 2.0 en proposant une gamme de 
services Live disponibles a partir de n'importe quel type de peripherique, que 
Ton soit connecte a Internet ou non. 

Un des premiers services Live lances par Microsoft est le portail Live.com, qui 
permet a l'utilisateur de creer son propre portail en personnalisant tous les 
elements affiches sur la page. 

On peut en effet, aj outer, deplacer, supprimer tous les elements affiches de 
maniere intuitive grace a la souris. Ainsi, ajouter un element affichant la meteo, 
les dernieres sorties au cinema, le contenu d'une boite d'e-mails, ou encore les 
dernieres informations d'un site recuperees via un flux RSS est un jeu d'enfant. 

En plus de tous les elements proposes par defaut dans Live.com, il est possible 
de developper ses propres elements appeles "gadgets", qui, une fois publies sur 
Internet, pourront etre exploites par les utilisateurs de Live.com du monde 
entier. 

Vous allez apprendre, dans ce chapitre, a creer un gadget simple, qui permet 
d'afficher le statut d'un contact Skype grace a Visual Web Developer Express 
et Visual Basic 2005. 



14.1 Configuration du systeme 

Vous devez appliquer quelques changements a votre systeme pour developper 
des gadgets qui pourront etre publies sur le site Live.com. 

Vous devez en effet configurer Internet Explorer pour etre capable de tester 
votre gadget developpe localement sur votre machine, sur le portail Live.com. 
II faut pour cela ajouter le site http://*.live.COm et le site http://*.Start.C0lt1 dans les 
sites de confiance d' Internet Explorer. 

Pour ce faire, lancez Internet Explorer, cliquez sur le menu Outils puis sur 
Options Internet. 

Dans la boite de dialogue qui s'affiche, cliquez sur l'onglet Securite et 
selectionnez l'icone Sites de confiance. Cliquez ensuite sur le bouton Sites. 

Dans la nouvelle fenetre, verifiez que la case Necessite un serveur securise 
(https:) pour tous les sites dans cette zone est bien decochee. Puis ajoutez les 
sites http://*. Iive.com et http://* .Start.com dans les sites de confiance. L'etoile dans 
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l'URL indique que tous les sous-domaines de ces sites seront egalement 
considered comme des sites de confiance. 



Options Internet 



General Securile | Confidentialite | Contenu| Connexions] Programmes | Avance| 
Selectionnez une zone de contenu Web pom specifier ses parametres de securile. 



JLJx] 



* 




© 


o 


Internet 


Intranet local 


Siles de 


Sites sensibles 






conliance 





Sites de confiance 

OCette zone conlient les sites Web de 
conliance ne risquant pas 
d'endommager votre ordinateur. 

Niveau de securile pour celte zone 



Peisonnalise 

Parametres personnalises. 

- Pour modifier vos parametres. cliquez sui Personna 
niveau. 

■ Pour utiliser les parametres recommandes, cliquez s 
par defaut. 



Vous pouvez ajouter ou supprimer des sites Web dans cette 
zone. Tous les sites Web dans cette zone utiliseront les 
parametres de securite de la zone. 



Aiijute ce site Web a la zone ; 



Personnaliser le niveau 



Niveau f Sites Web: 



http://' 1 . Iive.com 
http://*. start. com 



I - Necessite un serveur securise (https:) pour tous les sites dans cette zi 



A Figure 14-1 : Ajout dans les sites de confiance 

Ensuite, activez Faeces aux sources de donnees sur plusieurs domaines puisque 
vous souhaitez developper l'application localement et la tester sur le portail 
Live.com. 

Pour cela, toujours sous l'onglet Securite de la fenetre Options Internet, 
selectionnez l'icone Internet, puis cliquez sur le bouton Personnaliser le niveau. 

Dans la fenetre qui s'affiche, recherchez la categorie Divers et selectionnez 
Taction Demander pour l'element Acces aux sources de donnees depuis 
plusieurs domaines (voir Figure 14-2). 

Enfin, desactivez le cache de votre navigateur pour etre certain que le gadget 
qui s'affiche dans le site Live.com est bien celui que vous souhaitez tester, et 
non une ancienne version mise en cache. 

Pour cela, sous l'onglet General de la fenetre Options Internet, cliquez sur le 
bouton Parametres present dans la zone intitulee Fichiers Internet temporaires. 
Dans la boite de dialogue qui s'affiche, selectionnez l'option/A chaque visite de 
la page. Ainsi, Internet Explorer chargera la page web depuis le serveur qui la 
delivre a chaque visite (voir Figure 14-3). 
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General Securile | Confidentiality | Contenu | Connexions | Programmes | Avance | 
liclcciionriez une zorii? de conie-riu vv'eb F'-ji.ir :peLilier :e; pararrieire: de ;e:uri!e 



m *y o o 



Internet 

Cette zone contienl tous les sites 
Web que vous n'avez pas places 
dans d'autres zones. 



Niveau de securile pour cette zone 

Deplacez le curseur pour definir le niveau de securile de c 
_ Moyen 

- Navigation sure e! i-ependatit pratique 
■ Menage: Ei ■■■ .Eir i ! le leie.; li.a/gerre'i! Luritenu 

eventuellement non securise 
* Les condoles ActiveX non signes ne seront pas 

telecharges 
-Adapte pour la pkiparl de; :ite: Internet 

Personnaliser le niveau... Niveau 



O Activer 




- 


© Demander 






O Desactiver 






Divers 






©] Acces aux sources de donnees sur plusieu 


s domaines 


J 


O Activer 




O Demander 






© Desactiver 






AFfiche un contenu mixte 






O Activer 






© Demander 






0 Desactiver 






4S] Automations pour les chaines du logiciel 




.1 i 



Retatlr les paran-ietres pe;sonrialises 
Retablir : |Moyen 



"31 Petablir | 



▲ Figure 14-2 : Modification de la securite 



General | Securile | Confidentiality | Contenu | Connenions | Programmes j Avance | 
Fage de demarrage 



^ Vous pouvez choisir la page a utiliser comme page de demarrage. 
Adresse : | about: blank 
Page actuelle | Page par delaut | Page vierge | 

rchiei.: liilernei le-fipjiaire: 

\. Les pages Web que vous consultez sont stockees dans un dossier pour 
£ V un aflichage ulterieur plus rapide. 



Supprimer les cookies... | Supprimer le 



J. 



i Le dc : : ei Hi: tongue .luiiheni le: :er : vei:: le : page: que vou: ave: 
recemment affichees. afin d'y acceder rapidement. 



' A chaque visite de la page 

<~ A chaque demarrage de Internet Explore 

<~ Automatiquement 

f Jamais 



" Dossier Temporary Internet tiles 
Emplacement actuel I 



Espace disque a utiliser ; 

) . 



311 Mo 



Deplaner le dossier. . . Afficher les tichiers. . . ' Afficher les objets. .. 



▲ Figure 14-3 : Deactivation du cache 
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14.2 Composition d'un gadget 

Un gadget se compose de trois elements : 

■ Le premier et le plus important est le manifeste du gadget. II s'agit d'un 
fichier XML qui permet de definir les informations sur le gadget : son titre, 
sa description et les liens vers ses autres composants. 



Liste des balises les plus courantes dans un manifeste 


Element 


Description 


title 


Titre du gadget. Vous pouvez definir n'importe quelle valeur 
de type texte. Ce titre sera affiche par Live.com en haut de 
votre gadget. 


Hoc a" yi n"t""i r\n 
UcbL f I p L I UN 


l^CoLIipLlUll LIU gdtlgCl. 


language 


Code de langue utilise par le gadget. 


Binding: type 


Type utilise par le gadget et qui doit etre defini dans le fichier 
.js (code JavaScript) associe. 


item 


Un composant du gadget. Contient generalement un lien 
pointant vers un fichier JavaScript ou CSS. 


link 


Balise generalement presente dans une balise item. Permet de 
definir un lien vers un fichier JavaScript. 


link 

binding :type=css 


Balise incluse dans une balise i tern. Permet de definir un lien 
vers un fichier CSS. 


icons 


Balise contenant une ou plusieurs balises i con definissant les 
icones a afficher, et en particulier l'icone principale du 
gadget. 



Exemple de fichier manifeste : 

<?xml version="1.0"?> 

<rss version="2.0" xmlns:binding="http://www.live.com"> 
<channel> 
<title>Mon premier Gadget</title> 
<description>Description de mon premier gadget 
</description> 
<1 anguage>f r-f r</l anguage> 

<bi ndi ng : type>Wygwam.monPremi erGadget</bi ndi ng : type> 
<i tem> 

<1 ink>http://www. wygwam.com/Gadgets/ 
MonPremi erGadget /Mon Premi erGadget . j s</l i nk> 
</i tem> 
<i tem> 

<link binding:type="css"> http://www.wygwam.com/Gadgets/ 
MonPremi erGadget/Mon Premi erGadget. ess 
</l ink> 
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</item> 
<icons> 

<icon height="32" width="32"> 

http : //www.mydoinai n . com/Gadget s/MonPrerrri erGadget/MonPremi erGadget . gi f</i con> 
</icons> 
</channel> 
</rss> 

■ Le deuxieme element important est le fichier JavaScript (*.js). H contient 
la logique du gadget et du code JavaScript, execute du cote client. 

■ Le dernier important est le fichier .ess. II permet de definir la mise en page 
et la mise en forme du contenu du gadget. 

14.3 Creer un gadget de maniere rapide 
et simple 

Creer un gadget consiste done a creer le fichier manifeste, un fichier JavaScript 
qui generera lui-meme le rendu du gadget, et un style CSS pour mettre en 
forme et mettre en page le gadget. 

Le probleme est que toute l'interface doit etre generee via du code JavaScript. 
Ainsi, si vous souhaitez ajouter des images ou des boutons, vous devrez generer 
le code HTML correspondant grace a du code JavaScript. 

Le sujet de cet ouvrage n'etant pas le langage JavaScript, et la generation d'un 
gadget reel se revelant vite complexe si Ton utilise uniquement JavaScript, 
vous allez mettre en oeuvre une autre solution que celle promue par Microsoft, 
mais qui facilite grandement la tache. 

L'astuce consiste a utiliser une iframe, ce qui permettra d'afficher la page ASP 
.NET souhaitee a la place du code HTML genere a l'aide de JavaScript. 

Le code JavaScript se resumera done a quelques lignes dediees a l'integration 
de l' iframe dans le gadget. 

Commencez par creer le manifeste du gadget : 
<?xml version="1.0"?> 

<rss version="2.0" xmlns:binding="http://www.l ive.com"> 
<channel> 

<ti tl e>Skype Statut</title> 
<l ink>http://www.wygwam.com/</l ink> 
<description>Permet de visual iser le statut 
d'un utilisateur du logiciel Skype.</description> 
<l anguage>en-us</l anguage> 

<pubDate>Tue, 15 Aug 2006 12:30:00 GMT</pubDate> 
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<bi ndi ng : type>Gadget . Skype</bi ndi ng : type> 
<item> 

<1 ink>http://www. wygwam.com/Gadgets/Patrice/Skype. js</l ink> 
</item> 
<item> 

<link binding:type="css"> 

http://www.wygwam.com/Gadgets/Patrice/Skype.css</l ink> 
</i tem> 
</channel> 
</rss> 

Vous devez appeler l'URL du manifeste pour ajouter le gadget a votre page 
Live.com. 

Pour cela, cliquez sur le bouton Ajouter du contenu. Des lors un panneau 
s'affiche et propose les differentes categories disponibles (Gadgets, Actualites, 
Loisirs, Tech.. .). Cliquez sur Options avancees pour acceder au panneau d'ajout 
avance. Via ce panneau, vous pouvez rechercher des flux de donnees avec 
l'aide de Live Search, ajouter un gadget via une URL, ou bien importer un 
fichier OPML (fichier de listing de flux RSS). Vous allez a present ajouter un 
gadget. L'URL est www.wygwam.com/gadgets/patrice/skype.xml. Elle redirige sur le 
manifeste du gadget. Celui-ci va permettre a la plateforme Live de savoir quels 
fichiers doivent etre telecharges pour l'affichage du gadget. Une fois ajoute, ce 
dernier vient se placer automatiquement sur la page en cours de lecture. Vous 
pourrez cependant retrouver la liste de vos gadgets et flux RSS dans la rubrique 
Ma Selection. 



14.4 Integration d'une iframe 

L'integration de l'iframe se fait via le fichier JavaScript indique dans le 
manifeste. 

////Creation et referencement de l'espace de noms du gadget 
registerNamespace("Gadget") ; 

//Classe a implementer 

Gadget. Skype = function(p_elSource, p_args, pjiamespace) 

{ 

Gadget. Skype. i ni ti al izeBase (this, arguments) ; 
this. initialize = functi on (p_obj Scope) 
{ 

Gadget. Skype. getBaseMethod(this, "initial ize" , 
"Web. Bindings. Base"). call (this, p_obj Scope); 

var url = "http://localhost:4655/GadgetLive/Default.aspx"; 
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m_iframe = document. createElement("iframe") ; 

m i frame. scrolling = "yes"; 

m_i frame. frameBorder = "0"; 

m_i frame. src = url ; 

m_i frame.width="95%"; 

m_i frame. height="285px"; 

p_el Source. appendChi 1 d (m_i frame) ; 

} 

//Referencement de la classe 
Gadget. Skype.registerCl ass ( "Gadget. Skype", 
"Web. Bindings. Base") ; 

} 



eCC \arque 

^* URL de la page incluse 

Vous devez changer I'URL contenue dans la variable url par celle de votre page 
Une fois I'application deployee, vous devrez changer cette URL pour afficher 
page hebergee sur Internet, et non votre page locale. 



s) 



14.5 Creation de la page ASP .NET 

Maintenant que vous etes capable d' afficher votre page au sein du gadget grace 
a l'utilisation d'une iframe, vous devez developper cette page pour afficher le 
statut des contacts Skype et gerer lesdits contacts. 

Gestion des contacts 

L'utilisateur du gadget doit etre capable de gerer ses contacts. Vous allez lui 
permettre d'ajouter un contact ou de supprimer directement toute sa liste de 
contacts. 

Pour cela, vous allez utiliser la gestion des profils proposee par ASP .NET 2. La 
nouvelle version d'ASP .NET permet de gerer facilement des profils utilisateurs 
stockes dans une base SQL Server. Ces profils etant egalement applicables aux 
utilisateurs anonymes non authentifies sur le serveur, vous allez les sauvegarder 
pour tous les visiteurs sans leur demander de s'authentifier. 

Pour cela, lancez l'utilitaire aspnet_regsql.exe present dans le dossier du 
Framework .NET 2. 
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^* Dossier du Framework .NET 2 

Le Framework .NET se situe dans le dossier WindowslMicrosoft.NET/Framework. 
Vous y trouverez un dossier par version du Framework .NET installe sur votre 
machine. Rendez-vous dans le dossier de la version 2. Exemple : 
C:\WINDOWS\Microsoft. NEJ\Framework\v2. 0.50 72 7. 



Indiquez les differents renseignements demandes par l'Assistant et validez. 

Cet Assistant permet de generer une base de donnees SQL Server, qui peut 
contenir toutes les informations necessaires a la gestion des membres, avec 
entre autres, tout ce qui concerne la gestion des profils. 



Pour activer les profils, vous devez modifier le fichier Web.config de votre 
application web. Ajoutez la section suivante a votre Web.config pour configurer 
correctement votre application : 



ononymousldentifi cation enabled="true"/> 




<trust level ="Medium"/> 




<prof i 1 e defaul tProvider="MyProf i 1 eProvi 


der"> 


<properties> 




odd name="Contacts" al lowAnonymous= 


"true" 


type="ContactsManager" /> 




</properties> 




<providers> 




odd name="MyProfi leProvider" 




connecti onStri ngName= "Sql Server 1 




appl icationName="/" 




type="System. Web. Profile. Sql Profi leProvider" 


/> 


</providers> 




</profile> 





En ajoutant cette section, vous specifiez que vous activez la gestion des profils 
pour les utilisateurs anonymes, qu'un profil est constitue d'une propriete 
Contact qui est de type ContactsManager. Vous specifiez egalement que vous 
souhaitez utiliser le fournisseur de profils Sql Profi leProvider (livre avec ASP 
.NET 2). Ce fournisseur utilise une chaine de connexion nominee Sql Server. 

Vous devez done la definir dans la section Connecti onStrings du Web.config : 

<connect i onStri ngs> 
odd 

connecti onStri ng="server=.\SQLEXPRESS;database=aspnetdb; 
integrated security=SSPI;" name="SqlServer"/> 
</connecti onStri ngs> 



Le guide du codeur • 219 




Creation d'un gadget Live.com 



La base par defaut generee par l'Assistant est nominee aspnetdb. Utilisez done 
ce nom dans la chaine de connexion. 

II ne reste plus qu'a creer la classe ContactsManager pour gerer les contacts : 

Imports Microsoft. VisualBasic 
Imports System. Col 1 ecti ons . Generi c 

Public Class ContactsManager 

Private m_contacts As List (Of String) 

Public Sub New() 

End Sub 

Public Property Contacts () As List (Of String) 
Get 

If m_contacts Is Nothing Then 

m_contacts = New List (Of String) 
End If 

Return m_contacts 
End Get 

Set(ByVal value As List (Of String)) 

m_contacts = value 
End Set 
End Property 

Public Sub Aj outer (ByVal contact As String) 
If m_contacts Is Nothing Then 

m_contacts = New List (Of String) 

End If 

m_contacts. Add (contact) 
End Sub 

End Class 

Cette classe permet d'acceder a la liste des contacts grace a la propriete du 
meme nom et d'ajouter des contacts grace a la methode Ajouter. 



14.6 Interface de gestion des contacts 

II faut proposer a l'utilisateur d'ajouter des contacts ou de reinitialiser sa liste 
grace a quelques controles web. Pour cela, ajoutez un controle TextBox que 
vous nommerez txtContact en modifiant sa propriete Name, et deux boutons, le 
premier pour ajouter le contact saisi, et le second pour reinitialiser la liste. 
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Ajouter Supprimer 



■< Figure 14-4 : Interface de 
gestion des contacts 

Dans l'evenement Click du bouton d'ajout, placez le texte saisi dans la 
collection de contacts : 



Protected Sub btnAjout_Cl ick(ByVal sender As Object, 
ByVal e As System. EventArgs) Handles btnAjout.Cl ick 
Prof i l e . Contacts . Aj outer (txtContact . Text) 
End Sub 



Puis dans l'evenement CI ick du bouton de reinitialisation, modifiez la propriete 
Contacts de l'objet Profile en lui attribuant une nouvelle instance de 
ContactsManager : 

Protected Sub BtnInitialiser_Click(ESyVal sender As Object, 
ByVal e As System. EventArgs) Handles Buttonl.Cl ick 
Profile. Contacts = New ContactsManager 
End Sub 



14.7 Affichage des contacts 

Pour proposer une interface facile d'emploi a l'utilisateur, placez les controles 
de gestion des utilisateurs dans une div nominee ajout. Cette div sera affichee 
ou masquee par l'utilisateur grace a un clic sur un lien. 

Pour afficher tous les contacts presents dans le profil de l'utilisateur, on effectue 
une boucle for... each, qui permet d'enumerer tous les contacts et d'afficher 
l'image de statut Skype correspondante. 



^arque 

f Recuperer le statut d'un contact Skype 

Skype permet de connaTtre I'etat d'un utilisateur connecte a son service grace 
a une image disponible a I'adresse http://mystatus.skype.com/balloon/pseudo, ou 
pseudo est le pseudo Skype de l'utilisateur. 



Cela donne : 



<body> 
<script> 

function masquerAjoutQ 

{ 

i f (document . getEl ementBy Id ( ' ajout '). styl e . di spl ay== ' bl ock ' ) 
document .get El ementBy Id ( 'ajout ') .style. display='none' ; 



Le guide du codeur • 221 




Creation d'un gadget Live.com 



else 

document. getEl ementByld ( 1 a j out ') .style. display= 'block' ; 

} 

</script> 

<form id="forml" runat="server"> 
<div> 

<br /> 

<%For Each s As String In Profile. Contacts. Contacts%> 
<%=s %xa href="skype:<%=s %>?call"> 
<img align="absmiddle" width="112,5" height="45" border="0" 
src="http://mystatus. skype. com/ball oon/<%=s %>"/></axbr /> 
<%Next %> 

<a href="#" oncl ick="javascript:masquerAjout() ">Ajouter</a> 
<di v id="ajout" style="display:block"> 
<asp:TextBox ID="txtContact" 

runat="server"x/asp:TextBoxxasp: Button 
ID="btnAjout" runat="server" Text="Ajouter" /> 

<asp:Button ID="Buttonl" runat="server" 
Text="Supprimer" /> 
</div> 
</div> 
</form> 
</body> 



Skype Statut 

Ajouter 

Ajouter | Supprimer | 


Add Content 

Chargement en cours... 

v Meteo 

Paris, FRA: 22°C, Ger 

mercredi 

23" / 14' 


22*/ 14* 




Toulouse, FRA; 24°C, Generalement nuageux 

4fc> O 

mercredi jeudi 

29-/15° 32-/14° 



A Figure 14-5 : Interface du gadget dans Live.com 



14.8 Check-list 

Dans ce chapitre, vous avez appris a : 

■ creer un gadget Live.com grace a l'utilisation d'une iframe ; 

■ attribuer des profils a des utilisateurs anonymes. 
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I Selecteur de papier peint 



Dans ce chapitre, vous allez creer un utilitaire de changement de papier peint 
(wallpaper), l'image d'arriere-plan du Bureau de Windows. Le systeme d'ex- 
ploitation de Microsoft permet de selectionner une image et non d'afficher de 
nouvelles images aleatoirement. Vous allez done combler ce manque grace a un 
petit utilitaire developpe en Visual Basic 2005. 

Cette application sera le pretexte pour developper une application Windows qui 
s'integre totalement au systeme d' exploitation en utilisant des mecanismes 
courants tels que le demarrage automatique lors du lancement de Windows, 
l'utilisation d'icone dans la barre systeme de la barre des taches (traylcon), 
Faeces a la Base de registre, la gestion par glisser-deposer, etc. 

Vous verrez egalement comment utiliser les fonctions systeme API Win32 
offertes par Windows. 

15.1 Classes et espaces de noms 
utilises 

Bien que F application que vous allez realiser soit assez simple, vous allez 
devoir utiliser des espaces de noms assez varies puisque Futilitaire necessite 
des fonctionnalites dans de multiples domaines : 

■ System. Windows. Forms, pour tout ce qui concerne la creation d'interface 
Windows ; 

■ System. I0, pour la manipulation de fichiers ; 

■ System. Drawing, pour la manipulation d'images ; 

■ Microsoft. Win32, pour Finteroperabilite avec le systeme d' exploitation et 
plus particulierement Faeces a la Base de registre ; 

■ System. XML, pour la manipulation de documents XML. 

15.2 Acces aux donnees 

L'objectif de Fapplication que vous allez developper est de changer de papier 
peint automatiquement a chaque demarrage de Fapplication, ou manuellement 
suite a une action de Futilisateur. 

Vous devez done creer et stacker une liste d'images qui sera utilisee par 
Futilitaire. 

Stacker une liste de chemins de fichiers ne necessite pas la creation d'une base 
de donnees car elle ne contiendrait qu'une table et qu'un seul champ. Un fichier 
XML convient mieux au stockage d'une simple liste d'informations. 
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1 



15.3 Interface utilisateur 

L'application ne compte qu'un seul formulaire. Vous allez done modifier celui 
genere par defaut lors de la creation du projet par Visual Basic 2005 Express. 



Nouveau projet 



Types de projets : 



JLjxj 



- Visual Basic 

Windows 
F) Smart Device 

Base de donnees 

Starter Kits 
EE Autres langages 
EE Autres types de projets 
EE Guidance Packages 



Modeles Visual Studio installes 



Application 
Windows 



Application 
Smart Device 



Bibliotheque de 



Application 
console 



Bibliotheque de Application 
controles Wi. . . Crystal Reports 



| Projet de creation dune application avec une interface utilisateur Windows 

Nom : | Selection VVallPaperl 



A Figure 1 5-1 : Creation du projet Application Windows 

L'interface graphique du formulaire est assez simple. Pour eviter de gerer le 
redimensionnement des fenetres (inutile dans ce cas), vous allez modifier deux 
proprietes du formulaire. Pour commencer, modifiez la propriete FormBorderS- 
tyl e. Elle permet de definir le type de bordure du formulaire. Vous pouvez done 
indiquer que votre formulaire ne possede pas de bordure, ou possede une 
bordure redimensionnable, etc. Dans ce cas, vous allez affecter la valeur 
FixedDialog pour indiquer que la fenetre n'est pas redimensionnable car il 
s'agit d'une boite de dialogue simple. Modifier cette propriete ne suffit 
cependant pas a empecher le redimensionnement de la fenetre par un utilisateur. 
Le bouton d'agrandissement de la fenetre est toujours present et accessible. 
L'utilisateur peut done agrandir la fenetre grace a ce bouton present dans la 
barre de titre de la plupart des applications. Vous pouvez bien evidemment 
desactiver ce bouton grace a la propriete MaximizeBox en lui affectant la valeur 
Fal se. 
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Form! System. Windows. Forms. Form 




* 


mm* u 




CausesValidation 


True 






ContextMenuStrip 








ControlBox 


True 






Cursor 


Default 






DoubleBuffered 


False 






Enabled 


True 






Font 


Microsoft 5ans Serif; 3,25pt 






ForeColor 


| ControlText 






FormBorderStyle 


Fixed Dialog 






HelpButton 


False 




0 


Icon 


H (Icone) 






ImeMode 


NoControl 






IsMdiContainer 


False 






KeyPreview 


False 




FormBorderStyle 

Indique I'apparence et Ie comportement de la bordure et de la barre de 
tjtre du fbrmulaire. 



Figure 1 5-2 : 

Modification des 
proprietes du 
formulaire 



Vous allez utiliser un controle ListBox, qui va permettre d'afficher la liste des 
images qui seront affichees aleatoirement. Placez ce controle dans la partie 
superieure de votre formulaire de telle sorte qu'il prenne toute la largeur de la 
fenetre. Placez egalement un controle Pi ctureBox pour afficher la miniature de 
l'image selectionnee dans la zone de liste que vous venez de creer. Pour 
permettre a l'utilisateur de delimiter la Pi ctureBox, modifiez sa propriete 
Borders tyl e et definissez sa valeur a Fixed3D pour afficher une bordure avec un 
effet 3D delimitant l'emplacement et la taille de la miniature. Placez deux 
boutons, le premier permettant d'ajouter une image a la liste, et le second 
permettant de changer manuellement le fond d'ecran du Bureau de Windows. 



| Selection WallPaper 




pouter Image 



j^ppliquer WallPaper 



Figure 15-3 

Interface de 
I'application 



226 • Le guide du codeur 



Interface utilisateur 



Afficher une icone dans la zone de notification 

Pour rendre accessible l'application et pour qu'elle n'occupe pas de place dans 
la barre des taches, vous allez creer une icone dans la zone de notification, sur 
le cote droit de la barre des taches, pres de l'heure du systeme, de l'icone 
permettant de modifier le volume ou de l'icone MSN Messenger si vous l'avez 
installe. Pour ce faire, il suffit d'utiliser le composant Notifylcon en double- 
cliquant dessus dans la boite a outils. Le controle n'est pas ajoute sur le 
formulaire, mais en dessous, dans la zone reservee aux composants non visuels. 
Changez la propriete Text du controle pour afficher un message dans l'info- 
bulle de l'icone. Vous pouvez par exemple definir cette valeur a "Selection 
Wall Paper". 
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Pret 

A Figure 15-4 : Controle non visuel Notifylcon 

Maintenant que l'icone est creee grace au controle Notifylcon, vous allez 
permettre a l'utilisateur d'acceder rapidement aux fonctions de l'application 
grace a un menu contextuel. Ce menu permettra d' afficher le formulaire 
principal et de quitter l'application. Pour le creer, il suffit d'utiliser le controle 
ContextMenuStrip, disponible dans la categorie Menus et banes d'outils. 
Double-cliquez sur le controle pour l'attacher au formulaire et ajoutez une 
entree SAfficher, une entree ayant comme texte un simple tiret (-) et une 
derniere entree ayant pour texte &Quitter. 



Le guide du codeur • 227 




Selecteur de papier peint 



v^arque 

Astuces pour les menus 

L'esperluette (&] permet d'indiquer la lettre qui pourra servir a I'utilisateur pour 
acceder a I'element du menu via un raccourci clavier [Ait]+la lettre suivant 
l'esperluette. 

L'utilisation d'un simple tire (-] permet de creer un separateur dans le menu. 
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▲ Figure 15-5 : Utilisation du caractere & dans les menus 

Pour lier l'icone dans la zone de notification et le menu contextuel, il faut 
modifier la propriete ContextMenuStrip du controle Notifylcon en selectionnant 
le menu contextuel que vous venez de creer. 

Dans l'evenement Click de I'element &Afficher du menu contextuel, placez le 
code suivant pour afficher le formulaire : 

Private Sub AfficherToolStripMenuItem_Cl ick(ByVal sender As System. Object, 
ByVal e As System. EventArgs) Handles AfficherToolStripMenuItem. Click 
Me.WindowState = FormWindowState. Normal 
End Sub 
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Pour gerer la presence de l'icone dans la barre des taches, placez le code 
suivant dans l'evenement SizeChanged du formulaire : 

Private Sub Forml_SizeChanged (ByVal sender As System. Object, ByVal e As 
System. EventArgs) Handles MyBase. SizeChanged 

If Me.WindowState = FormWindowState.Minimized Then 
Me.ShowInTaskbar = False 

Else 

Me.ShowInTaskbar = True 
End If 



End Sub 



Ce code permet de masquer l'icone de la barre des taches lorsque la fenetre est 
reduite, et de l'afficher lorsque la fenetre est visible grace a la propriete 
ShowInTaskBar. 

Pour gerer la fermeture de 1' application, ajoutez le code suivant dans l'evene- 
ment Click de l'element &Quitter : 

Private Sub QuitterToolStripMenuItem_Click(ByVal sender As System. Object, 
ByVal e As System. EventArgs) Handles QuitterToolStripMenuItem. Click 

Appl ication.Exit() 
End Sub 

La methode Exit de la classe Application permet de quitter l'application. 

Pour demander une confirmation a 1' utilisateur, il faut saisir quelques lignes de 
code dans l'evenement FormClosing du formulaire : 

Private Sub Forml_FormClosing (ByVal sender As Object, ByVal e As 
System. Windows. Forms. FormClosingEventArgs) Handles Me. FormClosing 
If MsgBox("Etes-vous sur de vouloir quitter l'application ?", 
MsgBoxStyle. Question + MsgBoxStyle.YesNo, "Quitter ?") <> 
MsgBoxResult.Yes Then 
e. Cancel = True 
End If 
End Sub 



Dans ce code, vous afiichez une boite de dialogue a l'aide de la fonction 
MsgBox et vous annulez la fermeture de la fenetre en modifiant le parametre 
FormClosingEventArgs, nomme e, de l'evenement FormClosing. 




< Figure 15-6 : 

Boite de dialogue de 
confirmation 



Le guide du codeur • 229 




Selecteur de papier peint 



15.4 Realisation 

Passons a present au "gros ceuvre", c'est-a-dire a l'essentiel de l'application. 
Vous allez apprendre a modifier le papier peint courant, a afficher une miniature 
d' image, et a interagir avec Windows en implementant des fonctionnalites de 
glisser-deposer et de manipulation de Base de registre. 

Definition du papier peint courant 

L'objectif principal de l'utilitaire que vous developpez est de changer le papier 
peint courant grace a la liste d'images que l'utilisateur a definie. 

II n'existe malheureusement pas de fonction dans le Framework .NET qui 
permette d'effectuer ce changement de papier peint. Vous allez done devoir 
utiliser les fonctions propres au systeme d' exploitation : l'API (Application 
Programming Interface) de Windows. L'interface de programmation duplica- 
tions proposee par Windows permet d'acceder a une importante partie des 
fonctionnalites utilisees par le systeme d' exploitation lui-meme. Ainsi, la 
gestion des fenetres, la gestion du Presse-papiers, le formatage de disques 
peuvent etre effectues par l'appel des fonctions utilisees par Windows et 
proposees par l'API, nominees couramment "fonctions API". 

La fonction que vous devez utiliser est SystemParametersInfo, presente dans la 
bibliotheque user32.dll, qui est l'une des librairies les plus importantes de 
Windows. Comme souvent, l'appel a une fonction API requiert l'utilisation de 
certaines constantes. Vous allez en utiliser trois differentes. Les valeurs de ces 
constantes ainsi que la syntaxe de la declaration de la fonction API sont 
indiquees dans la documentation de Windows destinee aux developpeurs et 
fournie par Microsoft. Malheureusement, cette documentation est assez an- 
cienne ; elle date de la creation de la version de Windows que vous utilisez, et 
les exemples fournis sont rarement proposes en Visual Basic .NET ou en C#. II 
est done preferable de rechercher de la documentation sur un site dedie 
disponible sur www.pinvoke.net. 

Voici la declaration des constantes et de la fonction API a utiliser pour le 
changement du papier peint : 

Private Const SPI_SETDESKWALLPAPER As Integer = &H14 
Private Const SPIFJJPDATEINIFILE As Integer = &Hl 
Private Const SP I F_S ENDW I N I N I CHANGE As Integer = &H2 

Private Declare Auto Function SystemParametersInfo Lib "user32.dll" ( 
ByVal uAction As Integer, ByVal uParam As Integer, 
ByVal lpvParam As String, ByVal fuWinlni As Integer) As Integer 

Vous allez maintenant creer une methode SetCurrentWal I Paper qui va permet- 
tre de definir le papier peint courant, a savoir le chemin de l'image qui sera 
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affichee, et le mode d'affichage (centre ou etire). Le changement d'image est 
effectue grace a un appel a la fonction API que vous avez declaree precedem- 
ment et le mode d'affichage est defini grace a des modifications dans la Base 
de registre de Windows. 

Public Shared Sub SetCurrentWal 1 Paper(ByVal imagePath As String) 
Dim imgBitmap As Image = Image. FromFile(imagePath) 
Dim desktopKey As RegistryKey = 

My. Computer. Registry. CurrentUser.OpenSubKey ("Control 
Panel \Desktop", True) 

des ktopKey . SetVal ue ( "Ti 1 eWal 1 paper" , " 0" ) 
If imgBitmap. Width > My. Computer. Screen. Bounds. Width Or 
imgBitmap. Height > My. Computer. Screen. Bounds. Height Then 
desktopKey . SetVal ue ( "Wal 1 paperStyl e" , "2" ) 

Else 

desktopKey. SetVal ue("Wall paper-Style", "0") 
End If 

desktopKey. Flush () 
desktopKey. Close() 

If System. 10. Path. GetExtension(imagePath) <> "bmp" Then 
imagePath = Path.ChangeExtension(imagePath, "bmp") 
i mgBi tmap . Save ( i magePat h , Imagi ng . ImageFormat . Bmp) 

End If 

imgBitmap. Dispose () 

SystemParametersInfo(SPI_SETDESKWALLPAPER, 0, imagePath, 
SPIFJPDATEINIFILE Or SPIFJENDWININICHANGE) 

End Sub 



Affichage de la miniature 

Pour ameliorer l'ergonomie de l'utilitaire, un apercu de l'image selectionnee 
dans le controle ListBox present sur le formulaire va etre affiche. Pour cela, il 
faut utiliser l'evenement Sel ectedlndexChanged et verifier qu'un element est 
selectionne en testant si la propriete Sel ectedlndex du controle est superieure 
a-1. 

Vous ne pouvez malheureusement pas afficher l'image dans un controle en 
specifiant directement le nom et le chemin du fichier souhaite car la propriete 
Image d'une PictureBox attend un objet de type Image. Pour des raisons de 
simplicite, vous pouvez utiliser un objet de type Bitmap (le type Bitmap herite 
du type Image et pourra done etre utilise pour definir la propriete Image d'une 
PictureBox) pour charger un fichier image et ensuite l'afficher. Pour beneficier 
d'un meilleur affichage de l'image, ecrivez le code suivant, qui centre l'image 
si sa taille est inferieure a la faille de la PictureBox et la redimensionne si elle 
est plus importante. 
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Private Sub lstWallPapers_SelectedIndexChanged(ByVal sender As 
System. Object, ByVal e As System. EventArgs) Handles 
1 stWal 1 Papers .Sel ectedlndexChanged 

If IstWall Papers. Sel ectedlndex > -1 Then 

Dim apercu As Bitmap = Image. FromFileO stWal 1 Papers. Text) 
If apercu. Width > 192 Or apercu. Height > 256 Then 

pctApercu.SizeMode = Pi ctureBoxSizeMode. Stretch Image 

Else 

pctApercu.SizeMode = PictureBoxSizeMode.Centerlmage 
End If 

pet Apercu. Image = apercu 
End If 
End Sub 
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A Figure 1 5-7 : 

Affichage de I'apercu 



Gestion du glisser-lacher 



Une des fonctionnalites interessantes qui est de plus en plus implemented dans 
les applications Windows et qui offre une souplesse d'utilisation a l'utilisateur 
est de permettre le "glisser-lacher" de fichiers depuis l'Explorateur de fichiers 
de Windows vers la zone de liste de 1' application. 

Pour activer le glisser-lacher vers la zone de liste, vous devez commencer par 
modifier la propriete Al 1 owDrop et la definir a True. 

Maintenant que le controle est capable de recevoir des elements par glisser- 
lacher, il est necessaire de changer le curseur de la souris lorsqu'un element 
glisse au-dessus du controle pour indiquer a l'utilisateur qu'il peut deposer 



232 • Le guide du codeur 



Realisation 



l'element sur ledit controle. II faut en ce sens utiliser l'evenement DragOver de 
la ListBox et modifier le parametre e de type DragEventArgs pour specifier le 
curseur affiche. 

Private Sub lstWallPapers_DragOver (ByVal sender As System. Object, ByVal e As 
System. Windows. Forms. DragEventArgs) Handles 1 stWal 1 Papers. DragOver 
If (e.Data.GetDataPresent(DataFormats.FileDrop)) Then 

e. Effect = DragDropEffects.Copy 
End If 
End Sub 



Lorsqu'un element est depose, l'evenement DragDrop est declenche. II faut done 
ajouter le code necessaire a l'ajout des elements dans la ListBox dans cet 
evenement. 

Private Sub lstWallPapers_DragDrop(ByVal sender As System. Object, ByVal e As 
System. Windows. Forms. DragEventArgs) Handles 1 stWal 1 Papers. DragDrop 
If (e.Data.GetDataPresent(DataFormats.FileDrop)) Then 
Dim files() As String = 

CType(e.Data.GetData(DataFormats.FileDrop), StringO) 
For Each file As String In files 
1 stWal 1 Papers . Items .Add (f i 1 e) 

Next 
End If 
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Demarrage automatique 

Le demarrage automatique d'une application lors du lancement de Windows 
peut se faire de deux manieres. La premiere est de creer un raccourci dans le 
groupe de demarrage du menu Demarrer. La seconde est la creation d'une 
valeur dans la Base de registre de Windows. 
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▲ Figure 15-9 : Groupe de demarrage dans le menu Demarrer 



Pour gerer toute cette partie liee au demarrage automatique, il est preferable de 
creer une classe StartManager, responsable de la creation et de la suppression 
de cette valeur dans la Base de registre. II suffit ensuite de creer trois methodes, 
EnableAutoStart, DisableAutoStart et IsAutoStart, pour respectivement acti- 
ver le demarrage automatique, le desactiver, et tester si 1' application a demarre 
automatiquement. 

Imports Microsoft. Win32 

Public Class StartManager 

Public Shared Sub EnableAutoStart () 
If Not IsAutoStart () Then 
Dim runKey As RegistryKey 
run Key = 

My. Computer. Registry. CurrentUser.OpenSubKey("Software\Microsoft\ 

Windows\CurrentVersion\Run" , True) 
runKey. SetValue("SelecteurWal 1 Paper" , Appl i cation. ExecutablePath) 
runKey. Flush () 
runKey. Close() 
End If 
End Sub 

Public Shared Sub DisableAutoStart() 
Dim runKey As RegistryKey 
runKey = 

My. Computer. Registry. CurrentUser.OpenSubKey("Software\Microsoft\ 

Windows\CurrentVersion\Run", True) 
runKey . Del eteVal ue ( "Sel ecteurWal 1 Paper" ) 
runKey. Flush() 
runKey. CI ose() 

End Sub 

Public Shared Function IsAutoStart () As Boolean 
Dim runKey As RegistryKey 
Dim returnValue As Boolean 
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run Key = 

My. Computer. Registry. CurrentUser.OpenSubKey("Software\Microsoft\ 
Windows\CurrentVersion\Run", False) 
returnValue = (Not runKey.GetValue("SelecteurWallPaper") Is Nothing) 
runKey.CloseQ 
Return returnValue 
End Function 
End Class 

II suffit a present d'appeler ces methodes lors de l'evenement CheckedChange du 
controle CheckBox pour gerer le demarrage automatique de l'application. 

Chargement et sauvegarde de la liste 

II est possible de stacker des informations dans des fichiers XML grace au 
mecanisme de serialisation 

Reportez-vous au chapitre Gestion d'un concours pour en savoir plus 
Renvoi a ce su J et - 

Vous allez ici utiliser une autre technique, qui consiste a creer manuellement et 
ex nihilo un document XML grace aux objets proposes par le Framework .NET 
dans l'espace de noms System. XML. Vous allez done utiliser un objet XmlTex- 
tWriter, qui va vous permettre d'ecrire un fichier XML en definissant ses 
balises une par une, ainsi qu'un objet Xml Document, qui vous permettra de 
charger un fichier XML et de naviguer au sein de celui-ci. 

Private Sub SaveListQ 

Dim ListWriter As New Xml TextWriter(" images. xml", 
N> System. Text. Encoding. UTF8) 
Li stWri ter . Wri teStartDocument () 
Li stWri ter . Wri teStart El ement ( " Images " ) 
For Each item As String In 1 stWal 1 Papers. Items 
Li stWri ter .Wri teEl ementStri ng ( " Image" , i tern) 

Next 

Li stWri ter. Wri teEndEl ement () 
Li stWri ter . Wri teEndDocument () 
Li stWri ter. Flush () 
Li stWri ter. CI ose() 
End Sub 

Private Sub LoadListQ 

Dim listDocument As New Xml Document 
Try 

1 i stDocument . Load ( " i mages . xml " ) 
For Each image As Xml Node In 

1 i stDocument . GetEl ementsByTagName ( " Image" ) 
1 stWal 1 Papers . Items .Add (image. I nnerText) 
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Next 

Catch filex As System. 10. FileNotFoundException 

'on ne fait rien, erreur generee si le fichier est absent (c'est 
le cas lors du premier demarrage 
Catch ex As Exception 

MsgBox("Une erreur s'est produite : " + ex. Message, 
MsgBoxStyle. Exclamation) 
End Try 

II faut a present appeler ces methodes depuis le formulaire. Vous devez done 
charger le fichier XML lors du demarrage du formulaire grace a son evenement 
Load. 

Private Sub Forml_Load(ByVal sender As System. Object, ByVal e As 
System. EventArgs) Handles MyBase.Load 
LoadListQ 
End Sub 

Ensuite sauvegardez la liste courante des images vers le fichier lors de la 
fermeture de 1' application et done du formulaire en modifiant son evenement 
FormClosing. 

Private Sub Forml_FormClosing(ByVal sender As Object, ByVal e As 
System. Windows. Forms. FormClosingEventArgs) Handles Me. FormClosing 
If MsgBox("Etes-vous sur de vouloir quitter 1 'application ?", 
MsgBoxStyle. Question + MsgBoxStyle. YesNo, "Quitter ?") <> 
MsgBoxResult.Yes Then 
e. Cancel = True 

Else 

SaveList() 
End If 

End Sub 



15.5 Check-list 

Dans ce chapitre, vous avez appris a : 

■ utiliser le controle Notifylcon pour afficher une icone dans la barre 
systeme de la barre des taches ; 

■ lire et ecrire un fichier XML grace a un objet Xml Document ; 

■ utiliser les fonctions API Win32 ; 

■ implementer les operations de glisser-lacher entre l'Explorateur et votre 
application ; 

■ manipuler des images. 
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WebParts 



Laisser a l'utilisateur la possibilite de personnaliser lui-meme une application 
selon ses propres besoins est une fonctionnalite interessante. Elle serait 
neanmoins compliquee a mettre en place si vous deviez partir de zero pour 
realiser vos propres mecanismes de stockage des elements personnalises par les 
utilisateurs et leur fournir des moyens de les modifier et de les organiser selon 
leur convenance. Heureusement, le Framework ASP .NET 2.0 met desormais a 
disposition ce que Ton appelle les WebParts. 

II s'agit d'un ensemble de composants qui interagissent et permettent de creer 
des pages web dans lesquelles les utilisateurs peuvent modifier l'apparence, la 
disposition, le comportement et les proprietes de chaque element directement a 
partir du navigateur. 

La fonctionnalite de base des WebParts est la personnalisation. Elle permet aux 
utilisateurs de modifier ou de personnaliser la disposition, l'apparence et le 
comportement des controles WebPart sur une page. Ces parametres personna- 
lises sont rendus persistants non seulement durant la session de navigation en 
cours, mais aussi a long terme, afin que les parametres d'un utilisateur ne soient 
pas perdus entre deux consultations du site. 

16.1 Classes et espaces de noms 
utilises 

Pas moins de cent cinquante classes sont associees aux WebParts, soit presque 
autant que dans System. Web. Ul.WebControls, qui contient les controles serveurs 
web classiques. C'est pourquoi elles necessitent un nouvel espace de noms : 
System. Web. U I .WebControls. WebParts. 

Toutes ces classes ne sont en realite qu'un portage de ce qui constitue la base 
du portail de travail collaboratif Windows Sharepoint Services, le premier 
Framework qui a utilise cette notion de WebPart et mis a disposition un 
ensemble de WebParts deja realises qui permettent de gerer des documents, de 
creer des listes d'evenements, d'annonces ou des taches. 



16.2 Configuration 

Les WebParts sont integres au modele de fournisseur ASP .NET dont nous 
avons parle dans plusieurs chapitres de ce livre. Cela implique notamment que 
vous pouvez configurer certaines fonctionnalites a partir du fichier web.config 
et de la section WebParts appropriee. 
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Section Web Parts 

Voici a quoi ressemblent les sections de configuration qui permettent de 
personnaliser le fournisseur de personnalisation des WebParts : 

<webParts enableExport="true | fal se"> 

<personal ization>...</personal ization> 

<transformers>...</transfonners> 
</webParts> 

<personal i zati on def aul tProvi der=" "> 

<authori zati on>...</authori zati on> 

<providers>...</providers> 
</personal ization> 

Section providers 

La section providers permet d'ajouter des fournisseurs de personnalisation de 
WebParts et de specifier leurs attributs : 

<providers> 

odd name="String" 
type="String" 

connecti onStri ngName="Stri ng" 
appl icationName="String" 

commandTimeout="Integer"/> 
</providers> 



Attributs de I'element add d'un SqIPersonalizationProvider 


Attribut 


Description 


appl icationName 


Attribut String facultatif. Specifie le nom de l'application 
pour laquelle on veut stocker et recuperer des 
informations de personnalisation. 


connecti onStri ngName 


Attribut Stri ng requis. Specifie la chaine specifique au 
fournisseur SQL utilise pour etablir la connexion a la 
base de donnees. 


commandTimeout 


Attribut Int32 facultatif. Specifie le nombre de secondes 
avant 1' expiration du delai imparti a une commande emise 
dans la source de donnees de personnalisation WebParts. 


name 


Attribut String requis. Nom convivial du fournisseur. 


type 


Attribut String requis. Specifie une reference d' assembly 
qualifiee complete a une classe qui implemente la classe 
Personal i zati onProvider de base. 



Par defaut, le fichier web.config utilise un fournisseur appele AspNetSql Perso- 
nal i zati onProvider, dont le nom de chaine de connexion est Local Sql Server 
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et dont le type est System. Web. Ul.WebControls. WebParts. SqlPersonalization 
Provider : 

<providers> 

<add connecti onStri ngName=" Local Sql Server" 
name="AspNetSql Personal izationProvider" 
type= " System . Web . U I . WebCont rol s . WebParts . 
Sql Personal i zati onProvi der" 

/> 

</providers> 

Si vous voulez l'utiliser, vous devez configurer votre base de donnees SQL ou 
SQL Express avec l'outil aspnet_regsql.exe situe dans le dossier 
C:\WINDOWS\Microsoft.NEl\Framework\v2.0.50727. 

Section authorization 

La syntaxe de la section authorization est similaire a celle utilisee pour 
specifier les roles et les utilisateurs autorises ou refuses dans une application : 

<authorization> 

<al 1 ow.../> 

<deny.../> 
</authorization> 

Elle dispose en plus d'un attribut verbs que vous pouvez utiliser pour declarer 
les autorisations de modification de page et de basculement entre la portee 
utilisateur et partagee. 

Les valeurs possibles sont done les suivantes : 

■ enterSharedScope : indique si un utilisateur ou un role peut entrer dans la 
portee partagee. 

■ modi fyState : indique si un utilisateur ou un role peut modifier des 
donnees de personnalisation pour la portee active. 

Voici a quoi peut ressembler la section webParts complete de votre fichier 
web.config : 

<webParts> 

<personal i zati on 
defaul tProvi der="AspNetSql Personal i zati onProvider"> 
<providers> 

<remove name="AspNetSql Personal izationProvider"> 
</remove> 

odd name="AspNetSql Personal izationProvider" 
type="System.Web.UI .WebControls. WebParts. 
Sql Personal i zati onProvi der" 
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connect! onStringName=" Local Sql Server" 
appl icationName="/WebPart" /> 
</providers> 
</personal ization> 
<authorization> 

<deny users="*" verbs="enterSharedScope" /> 
<allow users="*" verbs="modifyState" /> 
</authorization> 
</webParts> 



16.3 Construction de I'application 

Maintenant que votre fournisseur est configure, vous pouvez commencer a 
construire votre page de WebParts. Afin d'avoir une meilleure comprehension 
des elements qui entrent en jeu, vous allez construire votre application en 
plusieurs etapes en decouvrant a chaque fois quel controle WebPart vous devez 
utiliser et son utilite. 

Vous allez egalement separer chaque fonctionnalite dans des controles utilisa- 
teurs differents, ce qui vous permettra de mieux comprendre le role de chacun. 

Ajout du WebPartManager 

. webPartManager | Le controle WebPartManager est l'element principal qui gere les 
autres controles WebPart d'une page. Un seul controle WebPartManager est 
necessaire dans une page qui utilise des WebParts. Voici sa syntaxe declarative : 

<asp:WebPartManager ID="wpManager" runat="server" /> 

Ce controle n'a aucun rendu, c'est-a-dire qu'il n'est pas visible au moment de 
l'affichage de la page. Son role est de gerer tous les controles WebPart de la 
page. II gere des zones (regions qui contiennent des controles WebPart sur une 
page) et les controles qui se trouvent dans celles-ci. II suit egalement et controle 
les differents modes d'affichage d'une page (navigation, connexion, modifica- 
tion ou catalogue), et verifie si les modifications de personnalisation s'appli- 
quent a tous les utilisateurs ou aux utilisateurs individuels. Enfin, il initialise et 
suit les connexions et la communication entre des controles WebPart. 

Ajout des controles WebPartZone 

webPartzone| Le controle WebPartZone se charge de la disposition complete pour 
les controles WebPart qui composent l'interface utilisateur principale d'une 
page. Vous pouvez decomposer votre page en plusieurs zones dans lesquelles 
vous organiserez les differents WebParts que vous voulez utiliser. 
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La prochaine etape est done de creer une page contenant deux controles 
WebPartZone dans lesquels vous pourrez deposer vos WebParts, les organiser et 
les personnaliser a votre guise. La maniere la plus simple est de les placer dans 
un tableau a deux colonnes : 

<table border="0" width="100%" eel 1 paddi ng="2" 
cellspacing="2"> 

<tr> 

<td valign="top" height="100%"> 
<asp: WebPartZone 

ID="LeftWebPartZone" 
HeaderText="Gauche" runat="server"> 
<ZoneTempl ate> 
</ZoneTempl ate> 
</asp:WebPartZone> 
</td> 

<td valign="top" height="100%"> 

<asp: WebPartZone ID="RightWebPartZone" 
HeaderText="Droite" runat="server"> 
<ZoneTempl ate> 
</ZoneTempl ate> 
</asp:WebPartZone> 
</td> 
</tr> 
</table> 



Gauche 


Droite 


Zone de depot 


Zone de depot 



▲ Figure 16-1 : Affichage d'une page avec une zone gauche et une zone droite 



Les zones servent de gestionnaires de presentation sur une page WebPart. Les 
fonctionnalites disponibles pour ces zones et 1' affichage dependent du mode 
d'affichage en cours. 

Interessons-nous a present aux differents modes d'affichage qui existent et a la 
facon de basculer de l'un a l'autre. 

Modes d'affichage 

Voici les modes d'affichage par defaut vers lesquels l'utilisateur peut basculer 
s'il a les droits appropries. Ces modes heritent tous de la classe abstraite 
WebPartDi spl ayMode. 
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Valeurs possibles de I'enumeration WebPartDisplayMode 


Mode 


Description 


BrowseDi spl ayMode 


Affichage normal de consultation des controles 
WebPart. 


Desi gnDi spl ayMode 


Permet a l'utilisateur de faire glisser les controles 
WebPart pour modifier la disposition d'une page. 


Edi tDi spl ayMode 


Permet a l'utilisateur de modifier les controles d'une 
page. 


CatalogDi spl ayMode 


Permet aux utilisateurs d'ajouter et de supprimer des 
controles sur une page a l'aide des catalogues qui 
listent les WebParts disponibles. 


ConnectDi spl ayMode 


Permet aux utilisateurs de connecter des controles 
WebPart entre eux. 



Pour basculer facilement entre les modes d' affichage, vous allez creer un 
controle utilisateur qui va contenir des boutons dont les actions auront pour 
effet de modifier le mode d' affichage en cours. 

1 Dans le controle utilisateur, inserez pour chaque mode d' affichage dispo- 
nible un controle LinkButton qui servira a faire basculer la page dans ce 
mode. 



<asp:LinkButton ID="lnkBtnBrowse" runat="server"> 

Normal 
</asp:LinkButton> 



[IblBrowse] [IblDesign] [IbEdi] [IblCatalog] [IblConnect] [IblToggleMode] 

Connexion Mode="" Scope="" 

▲ Figure 16-2 : Boutons de basculement du mode d'affichage 

2 Au chargement de la page, verifiez pour chaque mode s'il est pris en 
charge, et masquez ou affichez le lien en consequence. La collection 
SupportedDi spl ayModes du controle WebPartManager vous aidera a faire ce 
test. 



Protected Sub PageLoad(ByVal sender As Object, 
ByVal e As System. EventArgs) Handles Me. Load 
InkBtnBrowse. Visible = wpManager. 
SupportedDi spl ayModes . Contai ns 
(WebPartManager. BrowseDi spl ayMode) 

End Sub 



3 Ajoutez egalement des gestionnaires d'evenements sur le clic des boutons 
afin de faire basculer la page dans le mode selectionne. 
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Protected Sub lnkBtnBrowse_Click(ByVal sender As Object, 
ByVal e As System. EventArgs) Handles InkBtnBrowse. Click 
wpManager.DisplayMode = WebPartManager.BrowseDisplayMode 
End Sub 

4 Vous pouvez egalement ajouter des controles Label indiquant la portee de 
la page ainsi que le mode en cours obtenu. 

Mode="<%= wpManager.DisplayMode. Name %>" 

Scope="<%= wpManager. Personal ization. Scope. ToStringO %>" 

Au chargement de la page web, vous obtiendrez cet affichage. Vous pouvez 
constater que le mode d'affichage de connexions entre WebParts n'est pas 
disponible et que la portee est au niveau de l'utilisateur. En outre, le mode 
d'affichage en cours est Browse, ce qui correspond au mode normal. 



Norma] | Disposition | Edition | Catalogue 
Decormexion Mode="Browse" Scope-'User' 



■< Figure 1 6-3 : Boutons de 
basculement dans une page web 



Un clic sur le bouton Disposition permet de passer en mode Design, qui fait 
apparaitre les deux zones gauche et droite et qui permettra plus tard de deplacer 
les WebParts. 



Web Parts 






Normal | Disposition | Edition | Catalogue 




Deconnexion Mode="Design" Scope-'User" 


Gauche 


Droite 


Zone de depot 


Zone de depot 



A Figure 16-4 : Page en mode Design 



Maintenant que le cadre est mis en place, il faut un controle WebPart a 
disposition. Vous pouvez en creer un vous-meme, comme s'il s'agissait d'un 
controle serveur personnalise, mais cela s'avere assez complique puisque vous 
devez tout creer par programmation. Heureusement, il existe une facon simple 
pour transformer un controle utilisateur en WebPart. 



Transformer un controle utilisateur 
en WebPart 

Cette methode a pour avantage de vous laisser la possibilite de creer l'interface 
de votre WebPart a l'aide du designer de controle utilisateur. Elle ne necessite 
ensuite que quelques etapes de configuration. II s'agit d'ajouter les proprietes 
qui vont faire de votre controle utilisateur, un controle WebPart a part entiere. 
II suffit pour cela d'implementer l'interface I Web Part. 



244 • Le guide du codeur 



Construction de I'application 



Interface IWebPart 

L'interface IWebPart fournit les methodes qui doivent etre implementees si 
vous voulez creer un WebPart. Voici les proprietes concernees et leurs roles : 



Proprietes a implementer de l'interface IWebPart 


Nom 


Description 


Catal oglconlmageUrl 


Obtient ou definit l'URL d'une image qui represente 
un controle WebPart dans un catalogue de controles. 


Description 


Obtient ou definit une breve expression qui resume la 
fonction d'un controle, en vue d'une utilisation dans 
les info-bulles et les catalogues de controles WebPart. 


Subti tl e 


Obtient une chaine concatenee avec la valeur de la 
propriete Title pour constituer le titre complet d'un 
controle WebPart, ce qui permet de differencier deux 
WebParts qui auraient le meme titre. 


Title 


Obtient ou definit le titre d'un controle WebPart. 


TitlelconlmageUrl 


Obtient ou definit l'URL d'une image utilisee pour 
representer un controle WebPart dans la propre barre 
de titre du controle. 


TitleUrl 


Obtient ou definit une URL vers des informations 
supplementaires relatives a un controle WebPart. 



Afin d'avoir a disposition une classe dont vous pouvez vous servir pour creer 
facilement des WebParts a partir de controles utilisateurs, vous pouvez avoir 
recours a une petite astuce qui consiste a declarer une classe abstraite qui herite 
de System. Web. UI .UserControl et qui implemente l'interface IWebPart. 

Le code fournit une implementation de base pour les proprietes que vous venez 
de voir : 

Public Mustlnherit Class ucWebPart 
Inherits System. Web. UI .UserControl 
Implements IWebPart 

Private _catalogImageUrl As String = String. Empty 
Private _description As String = String. Empty 
Private _subTitle As String = "[0]" 
Private _title As String = "Titre" 
Private _titleUrl As String = String. Empty 
Private _titleIconImageUrl As String = String. Empty 

Public Overridable Property Catal oglconlmageUrl () 
As String Implements IWebPart. Catal oglconlmageUrl 
Get 
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Return _catalogImageUrl 
End Get 

Set(ByVal value As String) 

_catalogImageUrl = value 
End Set 
End Property 

Public Overridable Property Description() As String 
Implements IWebPart. Description 
Get 

Return _description 
End Get 

Set(ByVal value As String) 

_description = value 
End Set 
End Property 

Public Overridable Readonly Property SubtitleQ 
As String Implements IWebPart. Subtitle 
Get 

Return _subTitle 
End Get 
End Property 

Public Property Title() As String 
Implements IWebPart. Title 
Get 

Return _title 
End Get 

Set(ByVal value As String) 

_title = value 
End Set 
End Property 

Public Property TitlelconlmageUrl () As String 
Impl ements IWebPart . Ti tl elconlmageUrl 
Get 

Return _titleIconImageUrl 
End Get 

Set(ByVal value As String) 

_titleIconImageUrl = value 
End Set 
End Property 

Public Property TitleUrl() As String 
Implements IWebPart. TitleUrl 
Get 

Return JitleUrl 
End Get 

Set(ByVal value As String) 

_titleUrl = value 
End Set 
End Property 
End Class 
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Vous n'avez ainsi a declarer ce code qu'une seule fois et vous pouvez en heriter 
a chaque fois que vous voulez transformer un controle utilisateur en WebPart. 
Pour cela, vous devez creer un controle utilisateur comme si vous developpiez 
une page puis heriter de la classe que vous venez de creer en personnalisant les 
proprietes de base selon vos besoins : 

Partial Class UCWebPart 

Inherits ucWebPart 

Public Sub New() 

MyBase. Title = "Titre personnal ise" 

End Sub 
End Class 

L'exemple de WebPart que vous allez creer est basique puisqu'il ne contiendra 
qu'une propriete Text que vous allez rendre "personnalisable" afin de pouvoir 
modifier le texte a afficher. 

16.4 Ajout d'une propriete 
"personnalisable" a un WebPart 

Pour qu'une propriete puisse etre utilisee par un WebPart, vous devez lui 
ajouter des attributs, dont certains seront utiles au moment de l' edition du 
WebPart : 

■ WebBrowsable indique si la propriete sera affichee dans l'editeur. 

■ WebDi spl ayName definit le nom convivial de la propriete qui apparaitra 
comme intitule dans l'editeur. 

■ WebDescription definit la description a utiliser comme info-bulle. 

■ Personal izable determine si la propriete est "personnalisable" et dans 
quelle portee. 

Voici le code correspondant a la propriete Text : 

<WebBrowsable() , 
WebDi spl ayName ( "Texte" ) , 
WebDescription ("Texte a afficher"), 
Personal izable()> _ 
Public Property Text() As String 
Get 

Return m_text 
End Get 

Set(ByVal value As String) 

m_text = value 
End Set 
End Property 
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Maintenant que vous avez un controle WebPart a disposition, vous pouvez 
ajouter une troisieme colonne aux tableaux contenant les zones, qui va servir a 
selectionner les WebParts que vous voulez deposer dans celles-ci et a les editer 
ensuite. 

Ajout de WebParts a partir d'un catalogue 



| jj cataiogZone Le controle CatalogZone contient des controles de type Catalog- 
Part. 

Vous pouvez utiliser cette zone pour creer un catalogue des controles WebPart 
que les utilisateurs pourront selectionner et ajouter a une page. 

Lorsque vous cliquez sur le lien Catalogue, le catalogue des WebParts 
disponibles s'affiche. Vous pouvez alors cocher les WebParts que vous voulez 
inserer et la zone cible. 



Catalogues 

Selectionner un catalogue : 

Catalogue declaratif (1) 
Catalogue de pages (0) 



Fermer 



Catalogue declaratif 



0 WebPartS ample 



Dans : Gauche v | Ajouter | | Fermer 
|Drcite 



< Figure 16-5 : Catalogue des 
WebParts disponibles 

Voici une presentation des differents catalogues disponibles. 

Controle DeclarativeCatalogPart 

[ j DedarativecataiogPart| Le controle Decl arati veCatal ogPart permet de proposer un 
catalogue des controles WebPart. Vous pouvez y ajouter de facon declarative les 
controles que vous avez implemented. 

<%@ Register Src="WebPartSample.ascx" 

TagName="WebPartSample" TagPrefix="ucl" %> 
<asp : Decl arati veCatal ogPart ID="Decl arati veCatal ogPart" 
runat="server"> 
<WebPartsTempl ate> 
<ucl : WebPartSampl e ID="WebPartSampl el" 
runat="server" /> 
</WebPartsTempl ate> 
</asp : Decl arati veCatal ogPart> 
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Controle ImportCatalogPart 

|^i importcataiogPart| Le controle ImportCatal ogPart permet d'importer un fichier de 
description pour un controle WebPart, afin que les utilisateurs puissent ajouter 
le controle a une page web avec des parametres predefinis. Ces fichiers de 
description possedent une extension .webpart. 

Controle PageCatalogPart 

pagecataiogPart| Le controle PageCatal ogPart est un catalogue qui conserve les 
references a tous les controles WebPart qu'un utilisateur a fermes sur la page 
WebPart en cours afin de lui permettre de restaurer les controles qu'il a 
supprimes. 



Manipulation d'un controle WebPart 

Vous pouvez enfin decouvrir les differentes fonctionnalites d'un WebPart une 
fois qu'il a ete ajoute dans une zone. En mode normal, le controle prend 
quasiment toute la place en largeur puisque la seconde zone est vide. 





Normal 1 Disposition I Edition I Catalogue I 




Deconnexion Mode="Browse" Scope-User" 


WebPartSample - [0] 






Texte par defaut 





A Figure 16-6 : Page en mode normal 



Le WebPart dispose de plusieurs actions 
possibles accessibles notamment a partir 
d'un menu et qui varient selon le mode 
d'affichage en cours. Une icone a droite du 
WebPart permet d'afficher ce menu. II 
contient toujours un lien Fermer qui supprime le WebPart de la zone meme si 
vous pouvez le recuperer a partir du catalogue de pages. 



■4 Figure 1 6-7 : 

Menu par defaut 



Le lien Reduire permet d'afficher unique- s 
ment la barre de titre. Le texte de ce lien 
devient alors Restaurer et permet de reaffi- 
cher la totalite du contenu du WebPart. 




< Figure 1 6-8 

Lien Restaurer 



La fonctionnalite la plus visuelle et la plus simple d'utilisation est le deplace- 
ment des WebParts entre les zones ou a l'interieur d'une meme zone. Pour cela, 
vous devez etre en mode Design. En cliquant sur la barre de titre sans relacher 
le bouton, vous pouvez faire glisser une copie transparente du WebPart ; une 
barre qui apparait au survol d'une zone accessible indique a quel endroit vous 
pouvez le deposer. 
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Normal | Disposition | Edition | Catalogue j 
Deconnexion Mode=" Design" Scope="User" 
Droite 



WebPartSample - [0] 




I exte par detaut 





Zone de depot 



A Figure 16-9 : Deplacement d'un WebPart 



Dans ce mode, un lien Supprimer est present 
dans le menu et permet de supprimer defi- 
nitivement le controle de la page. 




< Figure 16-10 

Lien Supprimer 



Edition d'un controle WebPart 

If EditorZone| Le controle EditorZone correspond a la zone chargee de l'edition 
d'un WebPart. Vous pouvez utiliser cette zone pour permettre aux utilisateurs 
de modifier et de personnaliser les controles WebPart d'une page. 

En mode Edit, le lien Editer du menu sert a afficher les editeurs declares a 
l'interieur de la balise <ZoneTempl ate> du controle EditorZone. 



Reduire 
J Fermer 
■j Supprimer 



A Figure 16-11 : Lien Editer 
II contient des controles de type EditorPart dont voici un apercu. 

PropertyGridEditorPart 

[ 4 PropertyGridEditorPart| Le controle PropertyGri dEdi torPart permet de modifier des 
proprietes personnalisees d'un controle WebPart. 

Le controle de saisie associe depend du type de la propriete. Par exemple, une 
chaifie de caracteres sera modifiable a l'aide d'une TextBox tandis qu'un 
booleen sera represente par une CheckBox et une enumeration pourra avoir une 
DropDownList. 
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Edition Fermer 

Modifiez les proprietes du web part, puis cKquez sur OK 
ou AppKquer pour appKquer les changements. 
Proprietes 

Texte: 

Texte par defaut 



< Figure 16-12 : 

Editeur des proprietes 
personnalisees 



AppearanceEditorPart 

| >y AppearanceEditorPart | Le controle AppearanceEdi torPart permet de modifier plu- 



sieurs proprietes d'interface utilisateur relatives a l'apparence d'un controle 
WebPart, comme sa taille ou son titre. 



Apparence 

Titre: 



WebPartSample 



Type de chrome: 



Par defaut 




Direction: 


Non defini 


V 


Hauteur: 


Pixels 


v 


Largeur 


Pixels 





□ Masque 



< Figure 16-13: 

Editeur des proprietes 
d'apparence 

LayoutEditorPart 

J LayougditorPart| Le controle LayoutEdi torPart permet de modifier plusieurs 
proprietes d'interface utilisateur concernant la disposition d'un controle Web- 
Part dans une zone. 



Layout 

Etat du ch rome: 
llormal " 

Zone: 
Gauche v 

Index de zone: 



< Figure 16-14 : Editeur des 
proprietes de disposition 
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■d BehavbrEditorPart| Le controle Behavi orEdi torPart permet de modifier plusieurs 
proprietes d'interface utilisateur concernant le comportement et les autorisa- 
tions d'un controle WebPart. 



Comportement 

0 Autoriser la fermeture 

0 Autoriser la connexion 

0 Autoriser la modification 

0 Autoriser le masquage 

0 Autoriser la reduction 

0 Autoriser le changement de zone 



< Figure 16-15 : Editeurdes 
proprietes de comportement 



16.5 Check-list 

Votre page de WebParts est maintenant terminee. Les WebParts fournissent des 
fonctionnalites extremement puissantes permettant de creer des applications 
que l'utilisateur peut personnaliser. 

Voici les concepts et les fonctionnalites presentes dans ce chapitre : 

■ creer une page de WebParts ; 

■ ajouter des controles WebPartZone a une page ; 

■ basculer entre les differents modes d'affichage ; 

■ transformer un controle utilisateur en WebPart ; 

■ ajouter une propriete "personnalisable" a un WebPart ; 

■ manipuler les WebParts (actions, disposition...) ; 

■ ajouter un catalogue de WebParts (Catal ogZone) ; 

■ ajouter des editeurs de WebParts (WebPartZone). 
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Stockage conformations dans un profil 

Dans de nombreuses applications qui gerent des utilisateurs, il faut stacker des 
informations differentes sur chacun d'entre eux. La personnalisation d'une 
application necessite certains developpements. Vous devez stacker les informa- 
tions a l'aide d'un identifiant d'utilisateur unique, reconnaitre des utilisateurs 
lorsqu'ils reviennent sur le site, puis extraire les informations necessaires a leur 
sujet. Pour faciliter vos developpements, vous pouvez utiliser la fonctionnalite 
de profil ASP .NET, qui permet de gerer la totalite de ces taches en toute 
transparence. 

La fonctionnalite de profil ASP .NET associe des informations a un utilisateur 
donne et les stocke sous un format persistant. Elle permet de les gerer 
facilement sans qu'il soit necessaire de creer ou de gerer une base de donnees 
personnelle. Elle les met a votre disposition a l'aide d'une classe qui contient 
des proprietes fortement typees, auxquelles vous pouvez acceder facilement 
depuis n'importe quel endroit de votre application. Elle permet en outre de 
stacker des objets de tout type en serialisant ces objets en binaire ou en XML. 
II s'agit d'une fonction de stockage generique. 

17.1 Classes et espaces de noms 
utilises 

La classe System. Web. Profile. ProfileBase heritee de SettingsBase fournit le 
modele a respecter si vous voulez developper votre propre fournisseur de 
profils. Voici les proprietes heritees et ajoutees : 



Proprietes de la classe System. Web. Profile. ProfileBase 


Propriete 


Description 


Context 


Obtient le contexte de parametres associe. 


IsAnonymous 


Obtient une valeur qui indique si le profil utilisateur est 
destine a un utilisateur anonyme. 


IsDirty 


Obtient une valeur qui indique si Tune des proprietes de 
profil a ete modifiee. 


Item 


Substitue (herite de la classe de base). Obtient ou definit 
une valeur de propriete de profil indexee par le nom de 
propriete. 


LastActivityDate 


Obtient la date et l'heure de derniere lecture ou de 
modification du profil. 


LastUpdatedDate 


Obtient la date et l'heure de derniere modification du 
profil. 


Properties 


Obtient une collection d'objets SettingsProperty pour 
chaque propriete dans le profil. 
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Proprietes de la classe System. Web. Profile. ProfileBase 


Propriete 


Description 


PropertyValues 


Obtient une collection de valeurs de propriete de 
parametre. 


Providers 


Obtient une collection de fournisseurs de parametres. 


UserName 


Obtient le nom d'utilisateur du profil. 



17.2 Configuration 

La section prof i l e du fichier Web.config se compose d'une collection de 
proprietes dont il faut conserver les valeurs et d'une collection de fournisseurs 
personnalises. Son prototype se presente comme suit : 

<prof i l e defaul tProvi der="Sql Provi der"> 
<providers> 

</providers> 
<properties> 

</properties> 
</profile> 



Les tableaux suivants presentent les syntaxes et les attributs que vous pouvez 
employer pour configurer vos proprietes et vos fournisseurs de profils : 



Attributs de I'element profile 


Attribut 


Description 


enabled 


Attribut Bool ean facultatif. Valeur par defaut : true. 
Specine si les profils utilisateurs ASP .NET sont actives, 
lis le sont si la valeur est true. 


defaul tProvider 


Attribut Stri ng facultatif. Valeur par defaut : 
AspNetSql Prof i l eProvi der. 

Specifie le nom du fournisseur de profils par defaut. 


inherits 


Attribut String facultatif. 

Contient une reference de type pour un type personnalise 
qui derive de la classe abstraite Prof i I eBase. Une classe 
Prof i l eCommon qui herite de ce type est generee 
dynamiquement et enregistree dans la propriete Prof i l e 
du HttpContext en cours. 
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Attributs de I'element profile 


Attribut 


Description 


automati cSaveEnabl ed 


Attribut Boolean facultatif. Valeur par defaut : true. 
Indique si le profil utilisateur est automatiquement 
enregistre a la fin de 1' execution d'une page ASP .NET. 11 
Test si la valeur est true. 

L'objet Prof i leModul e enregistre un profil utilisateur 
uniquement si le module detecte que le profil a ete modifie, 
en d'autres termes si la propriete IsDirty est true. 



Declaration d'une propriete de profil 

La declaration d'une propriete de profil se fait dans le fichier de configuration 
de 1' application, Web.config. 

Dans la section profile, creez une section properties qui va contenir la liste 
des proprietes a attribuer au profil des utilisateurs. L'ajout d'une propriete se 
fait de maniere simple : inserez au minimum une balise add, en specifiant le 
nom de la propriete a ajouter grace a l'attribut name. Le type par defaut d'une 
propriete est la chaine de caracteres (string). Si vous avez besoin d'un autre 
type, pour specifier l'age de 1' utilisateur par exemple, servez-vous de l'attribut 
type et specifiez le type desire, par exemple System. I nt32. Exemple : 

<properties> 

<add name="Age" type="System. Int32" /> 

odd name="Adresse"/> 
</properties> 

Voici la syntaxe generale de declaration de proprietes de profil : 

<properties> 
odd... /> 
<clear /> 
<remove... /> 

<group name="group name">. . .</group> 
</properties> 

odd 

name="Nom de la propriete" 
type="Type de la propriete" 
provider="Provider" 

seri al i zeAs="Stri ng | Xml | Bi nary | Personnal i se..." 
al 1 owAnonymous="true | fal se" 
defaultValue="Valeur par defaut" 
readOnly="true| fal se"/> 

/> 
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Attributs de I'element <add> de la collection properties de I'element profile 


Attribut 


Description 


name 


Attribut String requis. 

Specifie le nom de la propriete. Cette valeur est utilisee 
comme nom de la propriete pour la classe de profil 
generee automatiquement et comme valeur d' index pour 
la propriete dans la collection Properties. Le nom de la 
propriete ne peut pas contenir de point. 


type 


Attribut String facultatif. Valeur par defaut : String. 
Specifie le type de la propriete. 


provider 


Attribut String facultatif. 

Specifie le fournisseur de profils utilise pour stacker et 
recuperet' des valeurs de la propriete. La valeur de 
l'attribut provider est le nom de l'un des fournisseurs de 
profils specifies dans I'element providers. Si aucun nom 
de fournisseur n'est specifie, le fournisseur par defaut 
specifie dans I'element profile est utilise. 


serial izeAs 


Attribut facultatif. 

Specifie le format de serialisation de la valeur de 
propriete dans le magasin de donnees. Le format de 
serialisation utilise par defaut est specifique au 
fournisseur. C'est le fournisseur qui determine la 
serialisation utilisee, a savoir la serialisation String ou 
Binary dans le cas du fournisseur SQL. 


allowAnonymous 


Attribut Bool ean facultatif. Valeur par defaut : f al se. 
Specifie si la propriete peut etre obtenue ou definie, si 
l'utilisateur de l'application est anonyme. 


defaultValue 


Attribut String facultatif. 

Specifie la valeur par defaut, en l'absence d'une valeur de 
la propriete Prof i 1 e. 


readonly 


Attribut Boolean facultatif. Valeur par defaut : false. 
Specifie si la propriete est en lecture seule. 



Declaration d'un fournisseur de profils 
personnalise 

Si vous voulez utiliser une autre chaine de connexion ou personnaliser votre 
fournisseur de profils, vous pouvez en ajouter un. Specifiez ensuite dans 
I'element profile parent qu'il s'agit du fournisseur par defaut en donnant son 
nom a l'attribut defaultProvider. 
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^arque 

Ajouter un fournisseur ou redefinir celui par defaut 

II est fortement conseille de toujours ajouter un fournisseur ou de redefinir celui 
par defaut, ne serait-ce que pour specifier I'attribut appl icationName : donnez- 
lui le nom correspondent a I'application que vous developpez. Cela est notam- 
ment indispensable si vous utilisez une seule base de donnees pour gerer 
plusieurs applications. 



odd name="Sql Prof i 1 eProvi der" 

type=" System. Web . Prof i 1 e . Sql Prof i 1 eProvi der" 
connecti onStri ngName="Connecti onStri ng" 
appl icationName="Appl ication" 
description="Description" /> 



Attributs de I'element <add> de la collection providers de I'element profile 


Attribut 


Description 


name 


Attribut String requis. 

ojJCClllC 1C 11U111 UC 1 lll.MdllLL UC lUUilllaSCUl. 11 a aglL 

la valeur utilisee par I'attribut defaultProvider de 
I'element <profile> pour designer l'instance de 
fournisseur comme fournisseur de profils par defaut. name 
est egalement utilise pour indexer le fournisseur dans la 
collection Providers. 


type 


Attribut String requis. 

Specifie le type qui implemente la classe de base abstraite 
Profil eProvi der. 


connecti onStri ngName 


Attribut String requis. 

Specifie le nom d'une chame de connexion definie dans 
I'element <connecti onStri ngs>. La chaine de connexion 
specifiee sera utilisee par le fournisseur qui est ajoute. 


appl icationName 


Attribut String facultatif. 

Specifie le nom de I'application sous laquelle les donnees 
de profil sont stockees dans la source de donnees. Le nom 
d' application permet a plusieurs applications ASP. NET 
d'utiliser la meme base de donnees sans rencontrer de 
donnees de profil en double. Plusieurs applications ASP 
.NET peuvent egalement utiliser les memes informations 
de profil si Ton specifie le meme nom d' application. 
Les fournisseurs de profils inclus dans le Framework 
.NET utilisent la valeur Appl i cationPath pour la propriete 
Appl i cationName si cet attribut n'est pas specifie. 
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Attributs de I'element <add> de la collection providers de I'element profile 


Attribut 


Description 


commandTimeout 


Attribut Int32 facultatif. Valeur par defaut (pour ADO 
.NET) : 30. 

Specifie le nombre de secondes avant 1' expiration du 
delai imparti a une commande envoyee a la source de 
donnees d'appartenance. 


description 


Attribut String facultatif. 

Specifie une description de 1' instance de fournisseur de 
profils. 



17.3 Persistance des donnees 

Maintenant que vous savez declarer des profils au sein de votre application, vous 
devez mettre en place la persistance des informations qu'ils contiennent, les 
sauvegarder afin qu'elles puissent etre recuperees ulterieurement par ASP .NET 
lorsque l'utilisateur se connectera a votre site ou lorsque vous les afficherez. 

Cette persistance s'effectue grace a des fournisseurs de donnees specialises 
dans la sauvegarde de donnees liees aux profils. Ces classes heritent toutes de 
System. Confi gurati on . Setti ngsProvi der. 



Membres de la classe System. Configuration. SettingsPravider 


Methode 


Description 


GetPropertyValues 


Prend en parametre des objets Setti ngsContext et 
Setti ngsPropertyCol I ecti on. 

Setti ngsContext fourait des informations sur l'utilisateur. 
Vous pouvez les utiliser comme cle primaire pour 
recuperer des informations de propriete de profil sur 
l'utilisateur. Servez-vous de l'objet Setti ngsContext pour 
obtenir le nom de l'utilisateur et pour savoir s'il est 
authentifie ou anonyme. 

Setti ngsPropertyCol I ecti on contient une collection 
d'objets Setti ngsProperty. Chaque objet 
Setti ngsProperty fournit le nom et le type de la 
propriete, ainsi que des informations supplementaires, 
comme la valeur par defaut de la propriete et si elle est 
ou non en lecture seule. La methode GetPropertyValues 
remplit Setti ngsPropertyVal ueColl ecti on avec les objets 
Setti ngsPropertyVal ue etablis d'apres les objets 
Setti ngsProperty utilises comme entree. 
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Membres de la classe System. Configuration. SettingsProvider 


Methode 


Description 




Les valeurs de la source de donnees sur l'utilisateur 
specifie sont affectees aux proprietes PropertyVal ue de 
chaque objet SettingsPropertyValue et la collection 
entiere est retournee. 

L'appel de cette methode met egalement a jour la valeur 
LastActivityDate du profil utilisateur specifie, avec la 
date et l'heure courantes. 


SetPropertyValues 


Prend en parametre des objets Setti ngsContext et 
Setti ngsPropertyVal ueCol 1 ecti on. 

Setti ngsContext fournit des informations sur l'utilisateur. 
Vous pouvez les utiliser comme cle primaire pour 
recuperer des informations de propriete de profil sur 
l'utilisateur. Servez-vous de l'objet Setti ngsContext pour 
obtenir le nom de l'utilisateur et pour savoir s'il est 
authentifie ou anonyme. 

Setti ngsPropertyVal ueCol 1 ecti on contient une collection 
d' objets SettingsPropertyValue. Chaque objet 
SettingsPropertyValue fournit le nom, le type et la 
valeur de la propriete, ainsi que des informations 
supplementaires, comme la valeur par defaut de la 
propriete et si elle est ou non en lecture seule. La 
methode SetPropertyValues met a jour les valeurs des 
proprietes de profil dans la source de donnees sur 
l'utilisateur specifie. 

L'appel de cette methode met egalement a jour les 
valeurs LastActivityDate et LastUpdatedDate du profil 
utilisateur specifie, avec la date et l'heure courantes. 



SettingsProvider est une classe d'assez bas niveau. Creer une classe heritant 
de celle-ci demanderait pas mal de travail. C'est pourquoi Microsoft propose 
une classe abstraite plus specialised, nominee System. Web. Profi 1 e. Prof i 1 e 
Provider. Ainsi si vous souhaitez creer votre propre fournisseur de donnees, 
vous n'avez qu'a creer une classe heritant de Profi 1 eProvi der et a implementer 
la logique technique correspondant a votre besoin (stockage dans Oracle, dans 
un fichier plat...). 

Bien evidemment, Microsoft ne vous oblige pas a creer votre propre fournisseur 
de donnees a chaque fois que vous souhaitez implementer une gestion de 
profils, et propose un fournisseur de donnees par defaut nomme System. Web- 
. Prof i 1 e.Sql Profi 1 eProvi der. Celui-ci permet d'enregistrer les donnees liees 
aux profils directement dans une base de donnees SQL Server, qui peut etre 
creee a l'aide d'un Assistant. 
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La fonctionnalite de profil ASP .NET utilise la meme structure a base de 
fournisseur que celle utilisee par 1' appartenance (la gestion des membres), la 
gestion des roles ou d'autres fonctionnalites ASP .NET. Elle s'appuie sur des 
fournisseurs de profils pour effectuer les taches principales (stocker et recuperer 
les valeurs des proprietes de profil entre autres). 

Fournisseur de profils 

ASP .NET comprend un fournisseur de profils qui stocke des donnees a l'aide 
d'une base SQL Server. La configuration ASP .NET par defaut de l'ordinateur 
contient et utilise une instance de Sql Prof i 1 eProvi der nominee AspNetSql Pro- 
f i 1 eProvi der. Vous pouvez specifier un fournisseur par defaut different dans le 
fichier Web.config de votre application. 

Pour utiliser le Sql Profil eProvi der, vous devez creer la base de donnees SQL 
Server dont il a besoin. En ce sens, executez le programme Aspnet_regsql.exe 
qui se trouve dans le repertoire C:\WINDOWS\Microsoft.NET\Framework\ 
V2.0.50727. 

Lorsque vous executez cet outil, specifiez l'option -Ap pour activer la fonc- 
tionnalite de profil sur une base de donnees et ainsi stocker des profils ASP 
.NET a l'aide du Sql Prof i 1 eProvi der. 

Utilisateurs anonymes 

Les profils peuvent egalement fonctionner avec des utilisateurs anonymes. La 
prise en charge des profils anonymes n'etant pas activee par defaut, vous devez 
l'activer explicitement. De plus, lorsque vous definissez des proprietes de profil 
dans le fichier Web.config, vous devez les rendre explicitement accessibles pour 
les utilisateurs anonymes individuellement. Les proprietes de profil ne prennent 
pas en charge l'acces anonyme par defaut. 

Si 1' identification anonyme est activee, ASP .NET cree une identification 
unique pour les utilisateurs la premiere fois qu'ils visitent votre site. L'identi- 
fication utilisateur unique est stockee dans un cookie sur l'ordinateur du visiteur 
afin que ce dernier puisse etre identifie a chaque demande de page. 



ononymousldenti f i cati on 




enabled=" [true | false]" 




cookieless= 




"[UseUri | UseCookies | AutoDetect | UseDeviceProfi 


le]" 


cookieName="" 




cookiePath="" 




cookieProtection=" [None | Validation | Encryption | 


All]" 


cookieRequireSSL="[true | false]" 




cookieSl idingExpi rati on=" [true | false]" 




cookieTimeout=" [DD.HH:MM:SS] " 
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domain="domaine.ext" 

/> 



Attributs de I'element anonymousldentification 


Attribut 


Description 


cookieless 


Specifie s'il faut utiliser des cookies dans une application 
web. 

L'enumeration HttpCookieMode permet de specifier la 
valeur de cet attribut dans la section de configuration. 
Elle est utilisee par toutes les fonctionnalites qui prennent 
en charge l'authentification sans cookie. Lorsque la valeur 
AutoDetect est specifiee, ASP .NET interroge le 
navigateur ou le peripherique pour determiner s'il prend 
en charge les cookies. Si c'est le cas, ces derniers sont 
utilises pour rendre les donnees utilisateurs persistantes ; 
sinon, un identificateur est saisi dans la chaine de requete. 
Cet attribut peut avoir Tune des valeurs suivantes : 
Valeur, Description. 

AutoDetect : indique que ASP .NET doit determiner si le 
navigateur ou le peripherique a l'origine de la demande 
prend en charge des cookies. Si c'est le cas, AutoDetect 
utilise des cookies pour rendre les donnees utilisateurs 
persistantes ; sinon, un identificateur est saisi dans la 
chaine de requete. Si le navigateur ou le peripherique 
prend en charge les cookies alors qu'ils sont actuellement 
desactives, ils sont neanmoins utilises par la 
fonctionnalite qui effectue la demande. 
UseCookies : specifie que les cookies doivent etre utilises 
pour rendre les donnees utilisateurs persistantes, que le 
navigateur ou le peripherique prenne en charge ou non les 
cookies. 11 s'agit de l'option par defaut. 
UseDeviceProfile : indique que ASP .NET doit 
determiner s'il faut utiliser des cookies sur la base du 

UdJ. dlllCLlC nLL|JDlUWbClUcipdUl 1 1 L 1 cj. Ol 1C UcLlCLlllCLlC 

indique que le navigateur ou le peripherique prend en 
charge les cookies, ces derniers sont employes ; sinon, un 
identificateur est utilise dans la chaine de requete. 
UseUri : indique que la fonctionnalite appelante doit 
utiliser la chaine de requete pour stocker un identificateur, 
que le navigateur ou le peripherique prenne en charge ou 
non les cookies. 
Valeur par defaut : UseCookies. 


cookieName 


Valeur par defaut : .ASPXANONYMOUS. 
Specifie le nom du cookie. 



262 • Le guide du codeur 



Persistance des donnees 




Attributs de I'element anonymousldentification 


Attribut 


Description 


cookiePath 


Valeur par defaut : le repertoire racine specifie par "/". 
Specifie le chemin d'acces au repertoire de stockage du 
cookie. Le chemin d'acces respecte la casse. 


cookieProtection 


Specifie la methode de protection contre les cookies. 


cookieRequireSSL 


Valeur par defaut : f al se. 

Specifie si le cookie exige une connexion SSL lorsqu'il 
est transmis au client. Comme ASP .NET definit la 
propriete de cookie d'authentification, Secure, le client ne 
retourne pas le cookie a moins qu'une connexion SSL 
soit utilisee. 


cookieSl idingExpi ratio 


i Attribut Boolean requis. Valeur par defaut : true. 
Specifie si le delai d'expiration d'un cookie est reinitialise 
a chaque demande ou selon un intervalle de temps fixe 
predefini. Si la valeur est true, le cookie expire lorsqu'il 
reste moins de 50 % de duree de vie (TTL, Time-To- 
Live). Si la valeur est false, le cookie expire une fois la 
duree cookieTimeout ecoulee. 


cookieTimeout 


Attribut TimeSpan requis. Valeur par defaut : 
10 000 minutes. 

Specifie le delai d'expiration d'un cookie en minutes. 


domai n 


Valeur par defaut : une chaine vide (""). 

Snpnfip lp Hnmainp Hn rnnkip f~"pt attribut aiitnrisp lp 

partage du cookie d'identification anonyme entre les 
domaines qui disposent d'un espace de noms DNS 
commun. Les sites doivent alors partager des cles de 
dechiffrement et de validation. D'autres attributs de 
configuration de 1' identification anonyme, tels que le 
chemin d'acces et le nom du cookie, doivent etre 
identiques pour tous les sites. 


enabled 


Attribut Bool ean facultatif. Valeur par defaut : f al se. 
Specifie si 1' identification anonyme est activee. Si la 
valeur est true, un cookie (ou une valeur sans cookie) est 
utilise pour gerer l'identificateur anonyme de l'utilisateur. 



Migration des informations de profil anonyme 

Dans certains cas, une propriete de profil doit etre accessible pour les 
utilisateurs anonymes. II peut etre utile de stacker des informations de profils 
pour les visiteurs d'un site web, notamment lorsque Ton souhaite implementer 
une gestion de paniers. Par exemple, les sites d'e-commerce proposent a tous 
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leurs utilisateurs, de rajouter des produits a un panier, ces utilisateurs devant 
s'authentifier avant de valider leur commande. 

La difficulte consiste a faire migrer les informations d'un profil anonyme vers 
un profil utilisateur au moment ou celui-ci se connecte. 

Vous pouvez gerer l'evenement MigrateAnonymous dans le fichier Global. asax 
pour effectuer une migration des informations de l'identite anonyme de 
l'utilisateur vers la nouvelle identite aufhentifiee. 

L'exemple de code suivant montre comment effectuer une migration des 
informations au moment ou l'utilisateur s'authentifie : 

Public Sub Profil e_OnMigrateAnonymous( 

sender As Object, args As Profil eMigrateEventArgs) 

1 Migration vers le profil authentifie. 

Dim anonymous Profile As Prof i 1 eCommon = 
Prof i 1 e . GetProf i 1 e (args . Anonymous I D) 

Profil e.PropertyName = anonymousProfile.PropertyName 

1 Suppression du profil anonyme. 
Prof i 1 eManager . Del eteProf i 1 e (args .Anonymous ID) 
Anonymous Identi f i cati onModul e.Cl earAnonymousIdenti f i er() 
End Sub 



17.4 Check-list 

Les differentes utilisations de la fonctionnalite de profil ASP .NET presentees 
ici montrent a quel point il est simple de stocker des informations sur un 
utilisateur et de les recuperer. 

Dans ce chapitre, vous avez appris a : 

■ stocker des informations sur un client ; 

■ faire migrer des informations d'un profil anonyme. 
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Le graphisme des pages est un element important d'un site et doit faire appel 
a d'autres competences que celles d'un developpeur, c'est-a-dire a celles d'un 
designer ou d'un integrateur. Ces metiers sont de plus en plus amends a 
cohabiter dans le cas de la construction d'une application web. Pour que leurs 
roles soient clairement definis, il est done indispensable de separer la presen- 
tation et le code a proprement parler. 

La fonctionnalite de themes introduite avec le Framework 2.0 va vous aider a 
regrouper les fichiers specifiques au graphisme dans un repertoire separe et a 
faire heriter vos pages et vos controles d'un theme visuel. 

Dans ce chapitre, vous apprendrez a connaitre les notions associees a la 
fonctionnalite de themes ASP .NET, a creer vos propres themes et a donner une 
apparence par defaut a vos pages et a vos controles. 

18.1 Mise en forme des controles 
serveurs 

Avant d'expliquer les themes, il est necessaire de presenter les differentes 
facons de mettre en forme un controle serveur. Certains moyens sont plus 
simples que d'autres a priori, mais au final, ils peuvent alourdir le code 
inutilement et devenir difficilement configurables. Nous allons vous presenter 
les differentes techniques, ce qui vous permettra de mieux comprendre com- 
ment cela fonctionne et de faire votre choix parmi elles. 

Proprieties de style 

La methode la plus simple pour personnaliser rapidement l' apparence de vos 
controles est de configurer les proprietes de style. Celles-ci sont un equivalent 
des attributs des balises HTML qui servent a representer le controle. 

Edition de proprietes de controle en mode Source 

En mode Source, la fonctionnalite d'lntellisense est accessible lorsque vous 
commencez a modifier la balise asp.net correspondant au controle serveur et 
propose toutes les proprietes disponibles par ordre alphabetique (voir 
Figure 18-1). 

Lorsqu'il s'agit de proprietes booleennes ou d' enumeration, l'editeur propose 
en plus l'ensemble des valeurs possibles une fois saisi le caractere =. Vous 
n'aurez qu'a cliquer sur la valeur desiree pour l'affecter a la propriete, ce qui 
vous evitera notamment de faire une erreur de saisie (voir Figure 18-2). 
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Button 1 System. Web , UI . WebControls , Button 
B Apparence 



BackColor 
BorderColor 


□□ 


Borders tyle 


NotSet 


BorderWidth 




CssClass 




Font 




ForeColor 


□ 


| Button 


Compo rte ment 



< Figure 1 8-1 : Liste des 
proprietes d'un controle d'une page 
aspx en mode Source grace a 
I'lntellisense 



<asp:Buccon ID^Buttonl" | runat="seiver" 




j^i AccessKey 




- BackColor 




_y BorderColor 




J5* BorderStyle 




j$ BorderWidth 




J5 4 CausesValidation 




CommandArgument 




CommandName 




- CssClass 




^j* Enabled v 







▲ Figure 18-2 : Liste des valeurs possibles d'une propriete d'un controle 

Edition de proprietes de controle en mode Design 

En mode Design, l'editeur de proprietes est encore plus simple. II permet de 
trouver la propriete a personnaliser et d'en modifier la valeur. 



<asp:Button ID=**Bucconl" Bac]cColor="j" runat^server" Text= n But:t;on" /> 


^ Violet /v 




5? Wheat 




sP White 




sP WhiteSmoke 




=p Window 




P WindowFrame 




=p WindowText 




P Yellow 




3p YellowGreen 




Q Selectionner une couleur... v 





A Figure 18-3 : Fenetre Proprietes d'un controle d'une page aspx en mode Design 



Options de Visual Studio 

Visual Studio possede des options interessantes relatives a l'editeur HTML en 
mode Source, c'est-a-dire celui que vous utilisez pour les pages ou les controles 
utilisateurs aspx. Pour configurer ces options, ouvrez la boite de dialogue 



Le guide du codeur • 267 



Site web avec selecteur de themes 



correspondante en selectionnant la commande Options du menu Outils. Les 
options relatives aux differents editeurs se trouvent dans le menu Editeur de 
texte. 



B Editeur de texte 
General 

Extension de fichier 



t c* 

+ CSS 

i-i l!n!l 

General 
Tabulations 
Divers 
Format 
Validation 
m PL/SQL 

SQL Script 
m Texte brut 
+ Tous les langages 
IS T-SQL 



> 



Completer automabquement les instructions 
P] Repertoner automatquement les membres 



PI Informations sur les parametres 
Parametres 
| | Activer I'espace virtuel 
| | Retour automatique a la ligne 



PI Appliquer les commandes Couper ou Copier aux lignes vides en ('absence 
de selection 
Afficher 
PI Numeros de ligne 

PI Activer la navigation dans les URL par simple die 
PI Barre de navigation 



▲ Figure 18-4 : Options de Visual Studio relatives a I'editeur HTML 



Options de formatage 

|B Afficher tgus les parametres| Si toutes les options ne sont pas affichees, cochez la case 
Afficher toutes les options en bas de la fenetre. Elle permet d' afficher et de 
masquer les options les plus frequemment utilisees. 

La commande Inserer des guillemets de vaieur d'attributs lors de la saisie du 
menu Editeur de texte/HTML/Format active une fonctionnalite qui ajoute 
automatiquement des guillemets une fois saisi le caractere = a la suite d'une 
propriete de controle. 

Cela peut paraitre anodin, mais ce genre d' option d'aide a la saisie permet 
d'ameliorer considerablement la productivite. II est parfois plus rapide d'ecrire 
une propriete que d'affecter une vaieur a partir du mode Design. 



^uce 

7 Options communes a tous les editeurs 

Le menu Editeur de texte/Basic permet de specifier des options communes 
tous les editeurs, comme I'affichage des numeros de ligne ou le retour 
automatique a la ligne. 



lur 
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La plupart des options de cette fenetre servent notamment lors de la mise en forme 
du document. Cette fonctionnalite extremement pratique permet de reorganiser les 
controles de la page selon les regie s de mise en forme specifiees. Elle est accessi ble 
a partir du menu Edition/Avace : 



Mettre le document en forme 



Vous pouvez egalement y acced er a partir d'un bouton de la barre d'outils 
Modification de la source HTML : Pj. tJ . tMMfc - =a| IB ™* | 

Si vous voulez aller plus loin dans la personnalisation des options de formatage 
ou comprendre quels choix de formatage ont ete faits pour chaque controle ou 
balise HTML, cliquez sur le bouton Options specifiques pour les balises. II 
ouvre une fenetre a partir de laquelle vous pourrez visualiser et configurer tous 
ces choix. Une arborescence permet de naviguer facilement dans la hierarchie 
des controles et de decouvrir pour chacun d'entre eux les options qui lui sont 
affectees. Un apercu qui montre le rendu genere par les options selectionnees 
est egalement affiche. 



Options specifiques pour les balises 



B Parametres par defaut * 
La balise diente ne prend pa; 
La balise diente prend en die 
La balise serveur ne prend pc 
La balise serveur prend en t± 
+: Balises HTML dientes 
H Contr6lesASP.NET 
AddVerb 

AlternatingltemStyle 
AlternatingRowStyle 
ApplyVerb 

asp : AccessDataSource 

asp:BoundColumn 

asp:BoundField 

EBB 

j asp:ButtonColumn 
asp:ButtonReld 
asp: Calendar 
asp : CheckBoxField 
asp:QrdeHotSpot 
asp:CommandReld 
aspiControlParameter , 

■i i mi ' i i m\~ 



Nouvelle balise... Nouveau dossier.. 



Suppnmer 



Mise en forme par balise 
Balise de fermeture : 



Balise de fermeture automatjque 


■1 


Sauts de ligne : 


Avant et apres 





PI Mettre en retrait le contenu 

Mode Plan de lediteur de code 

0 Activer le mode Plan pour la balise 
Nombre minimal de lignes : - 
Colorisatjon par balise 
Premier plan de la balise 



Personnalise.. 



Automatique v | Personnalise .. 
Arriere-pJan de la balise : □ Automatique 
□ Gras 

Apergu : 



...avant la balise 
<asp:Button /> 
apres la balise... 



▲ Figure 18-5 : Fenetre Options specifiques pour les balises 
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Selon les parametres par defaut, les balises qui ne contiennent aucun controle 
enfant sont fermees automatiquement alors que les balises avec contenu ont une 
balise de fermeture distincte. Par ailleurs, des sauts de ligne sont effectues dans 
certains cas. Enfin, le mode Plan (bouton de developpement et de reduction) est 
active pour des controles qui sont declares sur trois lignes ou plus. 

Figure 1 8-6 : 

Activation du mode 
Plan pour les balises 
de plus de trois lignes 



<asp:Button ID^Buttonl" 
Back-Color^" 

rur-at="server" Texr="Button" 



/> 



Options de validation 

Le menu Editeur de texte/HTML/Validation permet de selectionner le schema 
de validation que les pages doivent verifier et respecter. Des erreurs seront 
affichees si votre code ne respecte pas ce schema et les options de validation 
associees. 



ffl Environnement 
ffl Projets et solutions 
Si Controle de code source 
- Editeur de texte 
General 

Extension de fichier 
l±J Basic 
CS 

* CSS 
H HTML 

General 
Tabulations 
Divers 
Format 
Validation 
■ PL/SQL 

* SQL Script 



Validation 
Cible : 



Options 

0 Afficher les erreurs 

- 1 torsque les baises dentes ne sont pas en minuscules 
1^1 lorsque les balises sont incorrectes 
Gri] lorsque les valeurs d'attributs ne sont pas entre guillemets 
0 lorsque felement ou fattribut est desapprouve 

^ dans les styles rime 



▲ Figure 18-7 : Fenetre de selection du schema de validation 



Personnaliser un environnement de developpement 

N'hesitez pas a parcourir I'ensemble des options de Visual Studio afin 
configurer votre environnement de developpement selon vos souhaits. 
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Mise en forme automatique 



La plupart des controles serveurs evolues disposent d'un Assistant de mise en 
forme automatique. En mode Design, un smart tag permet d'ouvrir cet 
Assistant. 



^ Figure 1 8-8 : 

Smart tag de mise en 
forme automatique 
d'un controle 



Taches Login 



Mise en forme automatique, , , 

Definir les propnetes de ~ :-t t " ~: - t :es controles 



Une boite de dialogue s'ouvre alors et propose plusieurs styles preconfigures. 
La selection d'un style permet de visualiser le rendu que vous obtiendrez. 



Button 1 System . Web . UI . WebControls . Button 

mm j 

□ Apparence 



BackColor 


□ 




BorderColor 


□ 




Borders tyle 


NotSet 




BorderWidth 


CssClass 


Font 


ForeLolor 


□ 




| Button 



B Comportement 



< Figure 18-9 : 

Boite de dialogue 
Mise en forme 
automatique 



Les proprietes de style du controle associe sont affectees en accord avec 
l'apparence qui a ete selectionnee. 

Un controle Login par exemple ressemblera a ce qui suit une fois selectionnee 
l'apparence : 

<asp:Login ID="Logi nl" runat="server" BorderColor="#E6E2D8" 
BorderPadding="4" BorderStyle="Solid" BorderWidth="lpx" 
Font-Names="Verdana" Font-Si ze="0.8em" 
ForeColor="#333333"> 

<TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" 

Font-Size="0.9em" ForeColor="White" /> 
<InstructionTextStyle Font-Ital ic="Tnie" 

ForeColor="Black" /> 
<TextBoxStyle Font-Size="0.8em" /> 
<Logi nButtonStyl e BackCol or="#FFFBFF" 

BorderColor="#CCCCCC" BorderStyle="Sol id" 

BorderWidth="lpx" Font-Names=" Verdana" 

Font-Size="0.8em" ForeColor="#284775" /> 
</asp:Login> 
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Cette technique n'est pas conseillee puisqu'elle est en disaccord avec notre 
volonte de separer la presentation et le code et de diminuer le poids des pages 
grace a l'utilisation de feuilles de styles CSS. 

18.2 Themes 

Un theme permet de definir l'apparence des pages et des controles puis de 
l'appliquer de maniere coherente sur les pages d'une application web. Les 
themes sont stockes dans un repertoire particulier du site nomme App_Themes. 
Chaque dossier situe a la racine constitue un theme. Pour ajouter ce repertoire, 
cliquez du bouton droit sur le site dans l'Explorateur de solutions puis 
selectionnez Theme dans le menu Ajouter le dossier ASP.NET. 



Bin 




Ajouter le dossier ASP.NET 




App_GlobalRe50urces 




Ajouter une reference... 




App_LocalResources 




Ajouter une reference Web, , , 




App_WebReferences 




Afficher le diagramme de dasses 




App_Data 


li 


Copier le site Web.,, 




App_Browsers 




Options de demarrage... 




Theme 




Definir comme projet de demarrage 





Figure 18-10 : 

Ajout du dossier 
App_Themes 



Un theme sert a parametrer de maniere globale, et dans des fichiers separes, les 
proprietes des controles qui apparaissent dans les pages. II peut contenir des 
feuilles de style CSS, des images et des fichiers d'apparence. 

Fichiers d'apparence 

Un fichier d'apparence a 1' extension .skin et contient les parametres de 
propriete des controles serveurs. Les parametres d'apparence de controle sont 
semblables au balisage du controle lui-meme, mais contiennent uniquement les 
proprietes que vous souhaitez definir dans le cadre du theme. Par exemple, 
l'apparence suivante represente l'apparence de controle du controle Button : 

<asp:button runat="server" BackColor="lightblue" 
ForeColor="black" /> 

Vous creez des fichiers .skin dans le repertoire de votre theme. Un fichier .skin 
peut contenir une ou plusieurs skins de controle pour un ou plusieurs types de 
controles. Vous pouvez ainsi definir les skins dans un fichier separe pour chaque 
controle ou definir toutes les skins d'un theme dans un seul fichier. 

Vous etes libre de definir soit une apparence par defaut, soit une apparence 
nommee pour un controle grace a l'attribut Skin Id. 
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Apparence par defaut et apparence nommee 

Une apparence par defaut ne possede pas d'attribut SkinID et s'applique 

automatiquement a tous les controles du meme type lorsqu'un theme est 
applique a une page. 



^arque 

Aucun heritage d'apparence entre un controle parent et enfant 

Les apparences par defaut sont mises en correspondence exacte par type de 
controle. Cela signifie qu'il n'y a aucun heritage d'apparence pour un controle qui 
deriverait d'un type de controle auquel on aurait affecte un theme. Cela evite par 
exemple qu'un controle LinkButton herite de I'apparence d'un controle Button. 



Une apparence nommee est une apparence de controle dotee d'un ensemble de 
proprietes SkinID. Les apparences nominees ne s'appliquent pas automatique- 
ment aux controles. Vous devez affecter explicitement une apparence nommee 
a un controle en definissant la propriete SkinID du controle. La creation 
d' apparences nominees permet ainsi de definir differentes apparences pour 
plusieurs instances d'un meme type de controle. 

Creation d'un fichier d'apparence 

La boite de dialogue d'ajout de fichier dans un dossier de themes permet 
d'ajouter des fichiers CSS mais aussi des fichiers d'apparence .skin. Pour 
afficher cette boite de dialogue, cliquez du bouton droit sur le dossier du theme 
et selectionnez la commande Ajouter un nouvel element. 



Ajouter un nouvel element - http://localhost/CPE/Themes/ 




Modeles : 


HP 




Modeles Visual Studio installes 






m a i i # ft 






WinFX Service Feuille de style Rchier XML Rchier texte Fichier XSLT JJJJ 






r les modeles 






-J 

Rechercher des 






modeles en li. .. 






Rchier utilise pour definir un theme ASP.NET 






Nom : SkmFile.skin 




Lang age : Visual Basic vj D PJacerte code dans un fichier distinct 




LJ Selecbonner la page maltre 




' Ajo-jtei 


Annuler j 



A Figure 18-11 : Ajout d'un fichier d'apparence (.skin) a un theme 
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Copiez ensuite le code precedent en enlevant toutes les proprietes non 
Themeable - les proprietes non liees a la mise en forme - , comme l'identifiant 
du controle, mais en gardant runat=" server" qui est indispensable. Vous 
pouvez ensuite supprimer la mise en forme du controle grace au premier style 
de l'Assistant de mise en forme nomme Supprimer la mise en forme. II 
supprimera proprement l'ensemble des proprietes qu'il avait eventuellement 
ajoutees auparavant. Tous les controles du meme type contenus dans une page 
avec ce theme ressembleront ainsi au modele que vous venez de specifier. 

Editeur de fichiers d'apparence 

Par defaut, aucun editeur n'est associe aux fichiers d'apparence. Cela a 
notamment pour consequence que l'lntellisense n'est pas disponible et que les 
erreurs d'orthographe sur les noms de propriete ou les valeurs ne sont pas 
relevees. Heureusement, il est possible d'associer n'importe quelle extension a 
un editeur specifique. Vous pouvez ainsi utiliser l'editeur de controle utilisateur 
qui vous apportera toutes les fonctionnalites qui vous manquaient. Pour cela, 
ouvrez la fenetre des options puis selectionnez le menu Editeur de texte/ 
Extension de fichier. 



ffl Environnement 
ffl Projets et solutions 
ffl Controle de code source 
- Editeur de texte 
General 

Extension de fichier 
:+i Basic 
ffl C* 
+ CSS 

■ HTML 

■ PL/SQL 
itl SQL Script 
i+i Texte brut 
B Tous les langages 
ffl T-SQL 
ffl T-SQL7 
15 T-SQL80 



Extension : Editeur : 



j v | Appliquer 1 1 Supprimer 



Extension Editeur choisi 

skin Utilisateur - editeur de controle 



I I Mapper les fichiers sans extension vers : 



A Figure 18-12 : Ajout d'un editeur aux fichiers d'extension .skin 

Vous pouvez alors ajouter l'extension .skin et l'associer a l'editeur de controle 
utilisateur. 
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Feuilles de style en cascade 

Un theme peut egalement contenir des feuilles de style en cascade (fichier .ess). 
Lorsque vous placez un fichier .ess dans le repertoire des themes, la feuille de 
style est ajoutee automatiquement a la balise Head d'une page associee a ce theme. 



Differences entre les themes et les feuilles 
de style 

Les themes sont semblables aux feuilles de style CSS car tous deux servent a 
configurer l'apparence des elements des pages. Cependant, les themes ont la 
particularite de pouvoir definir plusieurs proprietes d'un controle ou d'une 
page, et pas seulement les proprietes de style. 



^uce 

^ Utilisation de la propriete CssClass 

En affectant la propriete CssClass des controles, vous pouvez facilement definir 
une apparence globale tout en gardant des pages conformes aux standards 
CSS. 

^ 



iir 
ds 



Association d'images aux proprietes 

Les themes peuvent egalement contenir des images. Certaines proprietes de controle 
sont en effet reliees au chemin d'acces vers une image, comme les boutons d'un 
Tree View, le separateur d'un SiteMapPafh ou les boutons d'un Login. 

De maniere generale, les fichiers de ressources du theme se trouvent dans le 
meme dossier que les fichiers d' apparence de ce meme theme, mais elles 
peuvent aussi etre stockees a un autre emplacement de 1' application web, 
comme un sous-dossier du repertoire des themes. Pour faire reference a un 
fichier de ressources d'un sous-dossier du repertoire des themes, utilisez un 
chemin d'acces similaire a celui represente pour la definition de l'apparence de 
ce controle Image : 

<asp:Image runat="server" ImageUrl="Theme/img.gif" /> 

Vous pouvez aussi stocker vos fichiers de ressources en dehors du repertoire des 
themes. Si vous utilisez le caractere tilde (-) pour faire reference aux fichiers de 
ressources, vous pouvez specifier un chemin d'acces relatif par rapport a la 
racine : 

<asp:Image runat="server" ImageUrl="~/Images/img.gif" /> 
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Proprieties definies a I'aide de themes 

Vous ne pouvez definir que les proprietes ayant un attribut Themeabl eAttri bute 
dote de la valeur true dans la classe du controle. 

Les proprietes qui specifient explicitement le comportement du controle plutot 
que l'apparence n'accepte pas de valeurs de theme. Par exemple, vous ne 
pouvez pas utiliser un theme pour definir la propriete CommandName d'un 
controle Button ou la propriete AllowPaging d'un controle GridView. 

Si vous le faites par curiosite ou par inadvertance, un message d'erreur explicite 
vous le rappellera. 

18.3 Appliquer un theme 
Priorite des parametres de theme 

Si vous definissez la propriete Theme d'une page, les parametres de controle du 
theme et ceux de la page sont fusionnes pour former les parametres du controle. 
Si un parametre de controle est defini a la fois dans le controle et dans le theme, 
les parametres de controle du theme ont la priorite et remplacent done tous les 
parametres du controle eventuellement specifies. 

Cependant, vous pouvez appliquer un theme sous forme de theme de feuille de 
style en definissant la propriete Styl eSheetTheme de la page. Dans ce cas, les 
parametres de page locaux sont prioritaires sur ceux definis dans le theme 
lorsque le parametre est defini aux deux emplacements. II s'agit du modele 
utilise par les feuilles de style en cascade. 

Vous pouvez ainsi combiner les deux en appliquant un theme sous forme de 
theme de feuille de style (Styl eSheetTheme) pour pouvoir definir les proprietes 
de certains controles de la page tout en appliquant un theme (Theme) pour garder 
une apparence globale. 

Declarer un theme 

Vous pouvez declarer un theme a utiliser dans une page grace a P attribut Theme 
ou Styl eSheetTheme de la directive de page. Par exemple : 

<%@Page Theme="DefaultTheme" 

Styl eSheetTheme="Defaul tStyl eSheetTheme" %> 

Vous pouvez egalement utiliser la section <pages> du fichier web.config a la 
racine du site pour affecter un theme par defaut a toutes les pages : 

<pages theme="Default" /> 
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Affecter un theme par programmation 

La propriete Theme est accessible pour chaque page. Elle permet d' affecter par 
programmation le theme de la page. Le gestionnaire d'evenements le plus 
approprie pour affecter le theme est l'evenement PreRender de la page. 



Themes globaux 

Un theme global peut etre applique a tous les sites web d'un serveur de sorte 
a definir une apparence globale. 

Les themes globaux sont identiques aux themes de page puisqu'ils incluent les 
memes types de fichiers, c'est-a-dire les fichiers d'apparence, les feuilles de 
style et les images. La seule difference est que themes globaux sont stockes 
dans un repertoire situe sous le repertoire C:\lnetpub\wwwroot\aspnet_client\ 
system _web\2_0_5072AThemes specialement prevu a cet effet. 

Vous pouvez ensuite utiliser un tel theme comme s'il etait present dans votre 
site et en faire le theme par defaut. 



^uce 

▼ Repertoire des themes globaux 

Si vous souhaitez vraiment que tous les sites d'un meme serveur aient la meme 
apparence, vous pouvez definir la propriete theme de I'element <pages> du 
fichier machine.config du repertoire C:\WINDOWS\Microsoft.NET\Framework\ 
V2.0.50727 afin que le theme s'applique a toutes les pages des sites. 



18.4 Stocker un theme par utilisateur 

Vous allez realiser un site dans lequel l'utilisateur pourra choisir lui-meme 
parmi differents themes et ainsi modifier l'apparence des pages. Cela peut se 
faire facilement. II suffit en effet de creer plusieurs themes dans le repertoire 
App_Themes et de les mettre a disposition de l'utilisateur pour qu'il puisse 
selectionner celui qui lui convient. 

II faut ensuite stocker le theme de l'utilisateur et l'affecter par programmation 
a chaque nouvel appel de page. Le mode de stockage le plus approprie est le 
cookie, qui a la particularite d'etre simple d'utilisation, persistant dans le temps 
et associe au navigateur de la machine cliente. 

II est conseille au prealable d'affecter un theme par defaut au cas ou l'utilisateur 
n'aurait pas encore selectionne de theme. 
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Listage des themes 

Vous pouvez mettre a disposition les differents themes d'un site a l'aide d'un 
controle DropDownLi st. Cette DropDownList sera placee dans une page maitre 
que vous pourrez utiliser pour creer toutes vos autres pages. Vous ne definissez 
ainsi le code correspondant qu'une seule fois. 

Pour recuperer les themes disponibles et initialiser la page avec le theme stocke 
dans un cookie, vous pouvez avoir recours au code suivant : 

Protected Sub Page_Load(ByVal sender As Object, 
ByVal e As System. EventArgs) Handles Me. Load 
If Not Page.IsPostBack Then 
Dim vpp As 

System. Web. Hosting. Virtual PathProvider = 
Hosti ng . Hosti ngEnvi ronment . 
Virtual PathProvider 
ddl Themes. DataSource = vpp. GetDi rectory 

("~/App_Themes") .Directories 
ddl Themes. DataTextFi eld = "Name" 
ddl Themes. DataBindO 
ddl Themes. SelectedValue = 

My. Request. Cookies ("Settings") ("Theme") 

End If 

End Sub 



La liste est ainsi remplie avec les themes 
disponibles dans le repertoire de themes. 




Figure 18-13 : 

Liste des themes 



Ajout d'un theme global a la liste 

Si vous voulez placer dans cette liste un theme global, vous pouvez ajouter un 
Listltem a la DropDownLi st, avec comme valeur le nom du theme, et activer sa 
propriete AppendDataBoundltems, ce qui introduira cet element au debut de la 
liste. 



Stockage des themes et affectation du theme 
selectionne 

Vous pouvez activer la propriete AutoPostBack de la DropDownList afin qu'elle 
declenche l'evenement Sel ectedlndexChanged au moment de la selection d'un 
theme. Vous reagissez ainsi a cet evenement en stockant le choix de l'utilisa- 
teur : 
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Protected Sub ddlThemes_SelectedIndexChanged( 

ByVal sender As Object, ByVal e As System. EventArgs) 
Handl es ddl Themes . Sel ectedlndexChanged 

My. Response. Cookies("Settings") ("Theme") = 

ddl Themes . Sel ectedVal ue 
My. Response. Cookies("Settings") .Expires = 

Date. Now. AddDays(l) 
Response . Redi rect (Request . RawUrl ) 

End Sub 



Initialisation du theme a I'appel d'une page 

Vous devez enfin initialiser chaque page avec le theme selectionne par 
l'utilisateur. Le moyen le plus simple est d'utiliser une classe qui herite de 
System. Web. UI. Page, d'y inserer le code d' initialisation et d'en faire heriter 
toutes vos pages. Comme vous l'avez vu precedemment, l'initialisation du 
theme se fait au moment d'un PreRender : 

Public Class BasePage 

Inherits Sy stem. Web. U I. Page 

Protected Sub Page_PreInit (ByVal sender As Object, 
ByVal e As System. EventArgs) Handles Me.Prelnit 
If My. Request. Cookies("Settings") Is Nothing Then 
Dim c As HttpCookie = 

New HttpCookie("Settings") 
c ("Theme") = "Blue" 
c. Expires = Date. Now. AddDays(l) 
My . Response . Cooki es . Add (c) 
End If 

Me. Theme = My. Request. Cookies("Settings") ("Theme") 
End Sub 

End Class 

Pour que toutes vos pages heritent de cette classe de base, utilisez l'astuce 
suivante. L' element page du fichier web.config permet de declarer un attribut 
qui correspond au nom de la classe dont toutes les autres doivent heriter. 

<pages pageBaseType="BasePage"x/pages> 

II y a cependant une contrainte importante puisque cet attribut ne fonctionne 
malheureusement que pour des pages qui declarent leur code a l'interieur meme 
de la page .aspx, et non pour les pages avec un ficher .aspx.vb associe (Code 
Behind). 
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18.5 Resultat final 

Apres avoir realise toutes ces etapes, vous avez a disposition un site web sur 
lequel l'utilisateur peut choisir un theme a sa convenance parmi ceux proposes. 
Si vous avez correctement specine les styles de chaque controle que vous 
utilisez dans vos pages, vous pouvez selectionner les differents themes et voir 
le resultat. 



Blue ■■• 



Se connecter 



Nom d'utilisateur :[ 

Mot de passe : | 
DMemoriser le mot de passe. 



M Figure 18-14 : Controle Login avec 
le theme Blue 



Red v 



Nom d'utilisateur 



Mot de passe : 



DMemoriser le mot de passe. 



Se zonnerter 



Figure 18-15 : Controle Login avec 
le theme Red 



18.6 Check-list 

Les themes ASP .NET sont une nouveaute extremement utile s'ils sont utilises 
a bon escient. Pour creer un theme et l'utiliser de la facon la plus optimale dans 
un site, mieux vaut recourir aux methodes conseillees dans ce chapitre. En 
outre, il faut respecter quelques regies lors de la creation de vos pages, par 
exemple n'affecter aucun style a vos controles et laisser toute personnalisation 
de l'affichage a la charge du theme. 

1 Creation du theme : 

- ajout du repertoire App_Themes ; 

- ajout du theme dont le nom de repertoire correspond au nom du theme. 

2 Declaration du theme par defaut dans le web.config : 
<pages theme="Default" /> 

3 Ajout de fichiers .skin : 

- declaration des controles avec leurs proprietes CssClass. 



280 • Le guide du codeur 



Check-list | 

4 Ajout de feuilles CSS : 

- utilisation des classes CSS pour affecter le style des controles. 

5 Si vous voulez affecter le meme theme a un autre site : 

- ajout du theme dans le repertoire des themes globaux : 
C:\lnetpub\wwwroot\aspnet_client\system_web\2_0_5072AThemes. 

6 Si vous voulez proposer plusieurs themes a l'utilisateur : 

- creation des themes 

- listage des themes, a savoir creation d'une Master Page contenant la 
liste des themes, puis initialisation de la liste : 

ddl Themes. DataSource = 

vpp . GetDi rectory ( "~/App_Themes " ) . Di rectori es 

- choix du mecanisme de stockage par utilisateur (cookie, session, cache, 
profil...)- 

- creation d'une page de base : 

affectation du theme par defaut a la selection : 

My. Response. Cookies("Settings") ("Theme") = 
ddl Themes . Sel ectedVal ue 

initialisation du theme a l'appel d'une page : 
Me. Theme = My. Request. Cookies("Settings") ("Theme") 
heritage des toutes les pages a la page de base : 
<pages pageBaseType="BasePage"x/pages> 
ou 

Partial Class _Default 
Inherits Base. Page 
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Representation de donnees hierarchiques a I'aide d'un controle TreeView 



L'affichage de donnees hierarchiques est un besoin qui apparait souvent lors du 
developpement d'une application. Dans ce chapitre, vous allez realiser diffe- 
rentes fonctionnalites a I'aide de controles TreeView qui vous permettront de 
mieux apprecier tout leur potentiel. 

19.1 Controle TreeView 

Dans le Framework 1.1, il n'existait aucun controle natif permettant de realiser 
ce genre de fonctionnalite facilement. Certains controles serveurs personnalises 
ont done ete developpes pour pallier ce manque, mais aucun ne repond a toutes 
les problematiques qu'un developpeur peut rencontrer. 

Le Framework 2.0 propose un nouveau controle evolue, TreeView, qui tire 
partie des ameliorations apportees a la creation de controles, comme la prise en 
charge du design, des ressources embarquees, des sources de donnees ou encore 
des fonctionnalites cote client. 

Les fonctionnalites suivantes sont notamment prises en charge : 

■ liaison a une source de donnees XML ; 

■ navigation a l'interieur d'un site lorsqu'il est associe a un controle 
SiteMapDataSource ; 

■ affichage des nceuds en tant que lien ou en tant que texte ; 

■ acces par programme au modele objet du TreeView pour agir dynamique- 
ment sur les noeuds et leurs proprietes ; 

■ remplissage de nceud cote client (sans rechargement) ; 

■ affichage d'une case a cocher devant chaque noeud ; 

■ apparence personnalisable grace aux themes, aux images defmies par 
l'utilisateur et aux styles. 

Avant d'expliquer comment ajouter des noeuds a un arbre et comment les gerer, 
passons en revue les notions qui leur sont associees. 

Notions relatives aux noeuds 

Chaque entree de l'arborescence est appelee "nceud". II existe plusieurs types 
de nceuds qui, selon leur emplacement dans la hierarchie, sont appeles 
differemment : 

■ Un noeud parent (ParentNode) contient d'autres nceuds. 

■ Un noeud enfant (Chi 1 dNode) est contenu dans un autre noeud. 

■ Un nceud feuille (LeafNode) n'a pas de noeud enfant. 
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■ Le nceud racine (RootNode) n'est contenu dans aucun autre nceud. C'est 
done l'ancetre de tous les autres nceuds. 

II est important de connaitre ces differents types de noeuds car plusieurs 
proprietes visuelles et comportementales sont determinees par le type d'un 
nceud. 



Classe TreelMode 

La classe correspondant a la notion de noeud est TreeNode. Voici un aper9U de 
ses proprietes : 



Proprietes d'un objet TreeNode 


Propriete 


Description 


Checked 


Obtient ou definit une valeur qui indique si la. esse a 
cocher du nceud est activee. 


ChildNodes 


Obtient une collection TreeNodeCol lection qui contient 
les nceuds enfants de premier niveau du nceud courant. 


DataBound 


Obtient une valeur qui indique si le nceud a ete cree via 
une liaison de donnees. 


Dataltem 


Obtient l'element de donnees qui est lie au controle. 


DataPath 


Obtient le chemin d'acces aux donnees liees au nceud. 


Depth 


Obtient la profondeur du nceud. 


Expanded 


Obtient ou definit une valeur qui indique si le nceud est 
developpe. 


ImageToolTip 


Obtient ou definit le texte d'info-bulle pour l'image 
affichee en regard d'un nceud. 


ImageUrl 


Obtient ou definit l'URL vers une image qui est affichee a 
cote du nceud. 


NavigateUrl 


Obtient ou definit l'URL a laquelle acceder lorsqu'un clic 
est effectue sur le nceud. 


Parent 


Obtient le nceud parent du nceud courant. 


PopulateOnDemand 


Obtient ou definit une valeur qui indique si le nceud est 
rempli dynamiquement. 


SelectAction 


Obtient ou definit l'evenement ou les evenements a 
declencher lorsqu'un nceud est selectionne. 


Selected 


Obtient ou definit une valeur qui indique si le nceud est 
selectionne. 


ShowCheckBox 


Obtient ou definit une valeur qui indique si une case a 
cocher est affichee en regard du nceud. 



Le guide du codeur • 285 



Representation de donnees hierarchiques a I'aide d'un controle TreeView 



Proprietes d'un objet TreeNode 



Propriete 


Description 


Target 


Obtient ou definit la fenetre (ou frame cible) dans 
laquelle afficher le contenu de la page web associee a un 
noeud. 


Text 


Obtient ou definit le texte affiche pour le noeud. 


Tool Ti p 


Obtient ou definit le texte d'info-bulle pour le noeud. 


Value 


Obtient ou definit une valeur non affichee utilisee pour 
stocker des donnees supplementaires relatives au noeud, 
telles que les donnees utilisees pour la gestion des 
evenements de publication. 


ValuePath 


Obtient le chemin d'acces du nceud racine vers le noeud 
courant. 



19.2 Ajouter des noeuds a un controle 
TreeView 

Le moyen le plus simple pour ajouter des noeuds a un controle TreeView est de 
les specifier a I'aide d'une syntaxe declarative. Pour cela, il suffit d' ajouter des 
balises <asp:TreeNode> a la collection <Nodes>. 



1 | Trewev. | Tout d'abord, deposez un controle TreeView sur votre page. La 
balise par defaut ressemble a celle-ci : 

<asp : TreeVi ew ID= "TreeVi ewl " runat=" server"x/asp : TreeVi ew> 

2 En mode Design, une fenetre de creation de nceuds statiques est disponible 
pour vous aider a gerer la hierarchie que vous voulez mettre en place. Pour 
l'ouvrir, cliquez sur le bouton situe a droite de la propriete Nodes dans 
l'Editeur de proprietes. Cette fenetre permet visualiser la hierarchie des 
nceuds, de les creer ou de les supprimer, et de modifier leurs proprietes. 



Drvers 


(ID) tvSiteMap 


Nodes 


(Collection) Q 


PathSeparator 


/ 


Target 





Figure 19-1 : 

Propriete Nodes 
dans l'Editeur de 
proprietes 

3 Ajoutez ensuite a la collection de nceuds <Nodes> les balises <asp:Tree- 
Node> que vous desirez. 



286 • Le guide du codeur 



Modifier des styles associes aux differents types de noeuds 



Proprietes : 

F A1|M 

ImageUrl A 

NavigateUrl 

PopulateOnDem False 

SelectAction Select 

Selected False 

ShowCheckBox 

Target 

Text Noeud 1.1 

ToolTip 

Value Valeur vj 

Text 

Texte affiche du noeud d'arbre. 



OK [ Annuler | 



A Figure 1 9-2 : Fenetre Editeur de nceuds TreeView 

4 Vous pouvez notamment modifier la propriete SelectAction, qui vous 
permet de specifier Taction a effectuer au moment de la selection du noeud. 



SelectAction 


Select 




Select 


Expand 
SelectExpand 
' lone 



Figure 19-3 : Propriete 
SelectAction d'un noeud 



Modes possibles pour un noeud 

Un nceud peut se presenter sous l'un des deux modes suivants : mode Selection 
et mode Navigation. Par defaut, un nceud est en mode de selection. Pour faire 
passer un nceud en mode de navigation, affectez une valeur differente d'une 
chaine vide (" ") a la propriete Navi gateUrl du nceud. Pour faire passer un nceud 
en mode de selection, affectez une chaine vide ("") a la propriete NavigateUrl 
du nceud. 



Editeur de noeuds TreeView 




19.3 Modifier des styles associes 
aux differents types de noeuds 

Plusieurs styles sont configurables pour un controle TreeView. Certains corres- 
pondent au style affecte a un type de feuille (racine, parent, feuille). 
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E 


Styles 




□ 


HoverNodeStyle 


S 


LeafNodeStyle 






LevelStyles 


{Collection) 


S 


NodeStyle 




S 


ParentNodeStyle 




S 


RootNodeStyle 




S 


SelectedNodeStyle 





Figure 1 9-4 : Liste des proprietes 
de style d'un controle TreeView 

Vous pouvez egalement agir sur les styles affectes au moment du survol 
(HoverNodeStyle) et de la selection (SelectedNodeStyle). II est ainsi facile de 
specifier que le noeud selectionne aura un arriere-plan jaune et que son texte 
sera en gras et en italique. 



B 


SelectedNodeStyle 






BackColor 


I | Yellow 




BorderCotar 


□ 




BorderStyle 


NotSet 




BorderWidth 






ChildNodesPadding 






CssClass 








Bold 


True 




Italic 


True 



Figure 19-5 : 

Proprietes de style de 
la propriete 
SelectedNodeStyle 

La propriete Level Styl es est une collection de styles qui permet de specifier le 
style des noeuds selon le niveau de hierarchie dans lequel ils se trouvent. Le 
bouton situe a droite de celle-ci dans l'Editeur de proprietes ouvre une fenetre 
dans laquelle vous pouvez ajouter les niveaux et configurer leurs styles 
respectifs. Vous pouvez par exemple affecter une couleur de texte verte aux 
elements racines et une couleur rouge aux elements enfants. 



Editeur de collections TreeNodeStyle 



Proprietes TreeNodeStyle : 




Personnaltser Web System 



I I Honeydev. 
SeaGreen 
Medium Sea Green 

SpringGrf 

I I MintCream 

Medium5pringGreen 
MediumAQuamarine 
I I Aquamarine 
I I Turquoise 

LightSeaGreen 
MjdiumTiirnunKP 



▲ Figure 19-6 : Fenetre Editeur de collections TreeNodeStyle 
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Affecter des images aux nceuds 



1 



L'apparence du controle dans l'Editeur en 
mode Design est mise a jour pour refleter les 
changements de style qui vous avez effec- 
tue. 




< Figure 19-7 : 

Controle TreeView 
en mode Design 



19.4 Affecter des images aux nceuds 

Vous avez la possibility d' affecter des images au debut de chaque noeud. La 
propriete ImageUrl d'un TreeNode permet de selectionner l'emplacement de 
l'image a l'aide d'une fenetre qui liste les images disponibles. 



MM 



Dossiers du projet : 



- .J* http://localhost/CPE/TreeView/ 



_a Collapse.gif 
_aj Expand, gif 
_aj Leaf Node, gif 
_ajParentNode.gif 
_jRootNode.gif 



Types de fichiers : 



Tous les fichiers (*.*) 



A Figure 19-8 : Fenetre Selectionner un element de projet 

Vous pouvez egalement specifier les images de reduction et de developpement 
a l'aide des proprietes Expand ImageUrl et CollapselmageUrl, ainsi qu'un 
repertoire (LinelmagesFolder) contenant les images des lignes. 

Enfin, pour associer simplement des images a vos nceuds, vous avez a votre 
disposition une liste d'images predefinies grace a la propriete ImageSet. Vous 
pouvez ainsi donner a votre arborescence une apparence qui la fait ressembler 
a un Explorateur Windows ou a une liste de contacts. 
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Irnaqeset 


Custom 




LinelmagesFolder 


Custom 


Nodelndent 


XPFileExplorer 




NodeWrap 


Msdn 




NoExpandlmageUrl 


WindowsHelp 




ShowExpandCollapse 


Simple 




ShowLines 


SimpleC 




Comporternent 


BulletedList 




AutoGenerateDataBind 


BulletedList? 




EnableClient5cript 


BulletedList3 
BulletedList4 




Enabled 




Arrows 




EnableTheming 


News 




EnableView5tate 


Contacts 




ExpandDepth 


Inbox 




MaxDataBmdDepth 


Events 




PopulateNodesFromClie 


Faq 





Figure 1 9-9 

des images 
predefines 



Liste 



Cette liste est aussi accessible a partir du lien Mise en forme automatique de la 
balise active et permet en plus d'avoir un apercu du resultat. 



Mise en forme automatique 



delect ionner un schema : 



Apercu : 



Supprimer la mise en forme ^ 
Fleches 



Liste 
Liste 
Liste 
Liste 
Liste 



puce-; 
puces 2 
puces 3 
puces 4 
puces 5 



Liste a puces 6 



Even erne nti" 
FAQ 







A Racine 




Parent 1 




\ Feuille 1 




^ Feuille 2 




Parent 2 




^ Feuille 1 




^ Feuille 2 





Appliquer 



■4 Figure 19-10: 

Assistant Mise en 
forme automatique 



^arque 

^ Ressources embarquees 

Ces images sont stockees dans I'assembly System. Web en tant que ressources 
embarquees. 
^ , 



2S^ 



yPour plus d 'informations sur les ressources embarquees au sein 
Renvoi d'assembly, reportez-vous au chapitre Creation d'un controle serveur 
personnalise. 
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19.5 Lier des donnees a un controle 
TreeView 

Le controle TreeView peut egalement etre lie aux donnees, soit de maniere 
declarative (avec une source de donnees appropriee), soit par programmation (a 
un objet Xml Document ou a un objet DataSet avec des relations), grace a des 
mecanismes de liaison de donnees avances. 

Balises DataBindings et TreeNodeBinding 

La collection DataBindings contient des objets TreeNodeBinding qui definissent 
la relation entre un element de donnees et le noeud auquel il est lie. Vous pouvez 
specifier les criteres de liaison et la propriete de l'element de donnees affichee 
dans le noeud a l'aide d'un element TreeNodeBinding. 

Le tableau suivant presente l'ensemble des proprietes d'un objet TreeNode 
Binding. Plusieurs d'entre elles sont similaires a celles de l'objet TreeNode. Des 
proprietes supplementaires permettent de relier ces proprietes a un champ de la 
source de donnees. 



Proprietes d'un l'element TreeNodeBinding 


DataMember 


Obtient ou definit la valeur a associer a une propriete 
IHierarchyData.Type pour un element de donnees afin de 
determiner si la liaison de nceud d'arbre doit etre appliquee. 


Depth 


Obtient ou definit la profondeur de nceud. 


FormatString 


Obtient ou definit la chaine qui specifie le format d'affichage 
du texte d'un nceud. 


ImageToolTip 


Obtient ou definit le texte d'info-bulle de l'image affiche a 
cote d'un nceud. 


ImageToolTipField 


Obtient ou definit le nom du champ de la source de donnees 
a lier a la propriete ImageToolTip. 


ImageUrl 


Obtient ou definit l'URL vers l'image affichee a cote d'un 
nceud. 


ImageUrl Field 


Obtient ou definit le nom du champ de la source de donnees 
a lier a la propriete ImageUrl. 


NavigateUrl 


Obtient ou definit l'URL vers laquelle effectuer le lien 
lorsque l'utilisateur clique sur un nceud. 


NavigateUrl Field 


Obtient ou definit le nom du champ de la source de donnees 
a lier a la propriete NavigateUrl . 


PopulateOnDemand 


Obtient ou definit une valeur indiquant si le nceud est rempli 
dynamiquement. 


SelectAction 


Obtient ou definit le ou les evenements a declencher 
lorsqu'un nceud est selectionne. Les valeurs possibles sont 
None, Expand, Select et SelectExpand. 
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Proprietes d'un I'element TreeNodeBinding 


DataMember 


Obtient ou definit la valeur a associer a une propriete 
IHierarchyData.Type pour un element de donnees afin de 
determiner si la liaison de nceud d'arbre doit etre appliquee. 


ShowCheckBox 


Obtient ou definit une valeur indiquant si une case a cocher 
est affichee a cote d'un noeud. 


Target 


Obtient ou definit la cible du lien d'un nceud. 


TargetField 


Obtient ou definit le nom du champ de la source de donnees 
a lier a la propriete Target. 


Text 


Obtient ou definit le texte affiche pour le nceud. 


Text Field 


Obtient ou definit le nom du champ de la source de donnees 
a lier a la propriete Text. 


Tool Tip 


Obtient ou definit le texte d'info-bulle d'un nceud. 


Tool Tip Field 


Obtient ou definit le nom du champ de la source de donnees 
a lier a la propriete Tool Tip. 


Value 


Obtient ou definit une valeur qui n'est pas affichee mais 
utilisee pour stacker des donnees supplementaires concemant 
un nceud, telles que les donnees utilisees pour gerer des 
evenements de publication. 


ValueField 


Obtient ou definit le nom du champ de la source de donnees 
a lier a la propriete Val ue. 



19.6 Remplir dynamiquement des noeuds 

Lorsque la source de donnees est trop consequente, que son traitement de 
recuperation est trop penalisant ou encore lorsque les donnees a afftcher 
dependent des informations que vous obtenez au moment de l'execution, vous 
ne pouvez pas definir statiquement l'arborescence du TreeView. 

Vous pouvez alors utiliser la fonctionnalite de remplissage dynamique de 
noeuds. En guise d'exemple, vous allez creer une arborescence qui recupere 
dynamiquement les clients puis les commandes a partir de la base de donnees 
SQL Northwind. 

Tout d'abord, deposez un controle TreeView dans votre page et ajoutez un nceud 
racine comme vous l'avez vu precedemment. 

<asp:TreeView ID="tvCustomers" runat="server"> 
<Nodes> 

</Nodes> 
</asp:TreeView> 
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Affectez la valeur true a la propriete Popul ateOnDemand d'un nceud, ce qui 
signifie que vous allez specifier vous-meme comment remplir le nceud a l'aide 
de code serveur. 

<asp:TreeNode Text="Cl ients" Value="Customers" Popul ateOnDemand="True" 
*>► Expanded=" False" /> 

Pour remplir un nceud dynamiquement, vous devez definir une methode de 
gestion pour l'evenement TreeNodePopul ate. En fonction du niveau auquel le 
nceud a ete developpe, vous pouvez specifiez des methodes de remplissage 
differentes. 

Protected Sub tvCustomers_TreeNodePopulate( 
ByVal sender As Object, ByVal e As TreeNodeEventArgs) 
handl es tvCustomers .TreeNodePopul ate 
Select Case e. Node. Depth 
Case 0 

Fi 1 1 Customers (e. Node) 
Case 1 

Fill Orders (e. Node) 
End Select 
End Sub 

La methode GetDataSet permet de recuperer un DataSet a partir d'une requete. 

Private Function GetDataSet (ByVal sql As String) As DataSet 
Dim connstr As String = _ "Data Source=(local); Initial 

Catalog=Northwind;User ID=sa" 
Dim da As SqlDataAdapter = New SqlDataAdapter(sql , connstr) 
Dim ds As DataSet = New DataSet () 
da.Fill(ds) 
Return ds 
End Function 

La methode Fi 1 1 Customers de remplissage des clients prend en parametre le 
nceud auquel elle doit ajouter les nceuds enfants. 

Private Sub Fill Customers (ByVal parent As TreeNode) 

Dim ds As DataSet = GetDataSet( "SELECT customerld, companyName FROM 

customers order by companyName 11 ) 
For Each row As DataRow In ds.Tables(O) .Rows 

Dim node As TreeNode = New TreeNodeQ 

node. Text = row("companyname") 

node. Value = row("customerid") 

node. Popul ateOnDemand = True 
node.SelectAction = TreeNodeSelectAction.SelectExpand 

parent . Chi 1 dNodes . Add (node) 

Next 
End Sub 
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La methode Fill Orders de remplissage des factures d'un client fait appel a la 
valeur du noeud parent pour effectuer la requete. 



Dv^nwa + o C11K Fill flvHorc I R w\/a 1 n a r\ +■ Ac Tv^dciWrvrtci 1 
r I 1 vd Lc JUL) r II 1 Ui Uci b \ Dy Va 1 Ud I cil I Mb 1 r cclNuUcy 




Dim rk As DataSpf = GptDataSpf f 

U 1 1 1 1 Uj nj UaLOJCL OCLL l OLOJCL\ 




JLLlL 1 LUo 1 UI 1 lc [ 1U, UI Ucl 1U rl\Un UrUcib WnLrMl LUbLUIIlCllU 


oi par ell L . v d I Lie cj 


»» ) 

For Each row As DataRow In ds.Tables(O) .Rows 




Dim node As TreeNode = New TreeNodeQ 




node. Text = row("orderid") 




node. Value = row("orderid") 




node.PopulateOnDemand = False 




node.SelectAction = TreeNodeSelectAction.SelectExpand 




parent . Ch i 1 dNodes . Add (node) 




Next 




End Sub 





Enfin, le remplissage des nceuds cote client permet au controle TreeView de 
remplir un noeud a I'aide de script client lorsque les utilisateurs developpent le 
noeud, sans necessiter d'allers-retours avec le serveur. Pour cela, il suffit 
d'affecter la valeur true a la propriete PopulateNodesFromClient. 



^\arque 

Fonctionnalite disponible uniquement pour les navigateurs avarices 

Seuls les navigateurs evolues peuvent utiliser cette fonctionnalite de remplis- 
sage de nceuds cote client. 



Vous obtenez ainsi un controle TreeView dont les noeuds ne sont charges que 
lorsque Ton clique dessus, ce qui ameliore considerablement les performances, 
et tout cela sans rechargement de la page. 



a Clients 

a Alfred Futterkiste 
10643 
10692 
10702 
10835 
10952 
11011 

Si Ana TrujiHo Emparedados y helados 
ffl Antonio Moreno Taqueria 
ffl Around the Horn 



A Figure 19-11 : Remplissage 
dynamique des clients puis de leurs 
factures 
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Source de donnees hierarchiques 

Le fait d' avoir un controle TreeView est une chose, encore faut-il des sources 
de donnees adequates qui puissent representer une hierarchie. Pour cela, la 
source de donnees doit implementer l'interface IHierarchicalDataSource. 

Voici une presentation des deux sources de donnees hierarchiques principales 
incluses dans le Framework ASP .NET. 

XmlDataSource 

i xmipatasource| Le controle XitiI DataSource utilise un fichier XML, ce qui permet 
d'obtenir une source de donnees hierarchiques que vous pouvez lier a des 
controles tels que TreeView ou Menu. II prend notamment en charge des 
fonctions de filtrage a l'aide d'expressions XPath. Enfin, il permet de mettre a 
jour des donnees en enregistrant le document XML entier avec ses modifica- 
tions. 

SiteMapDataSource 

steMapDatasourcel Le controle Si teMapDataSource est une source de donnees 
specialement adaptee aux plans de site hierarchiques et aux controles de 
navigation, comme TreeView mais aussi comme Menu ou SiteMapPath. 

Voici comment associer un TreeView a un plan de site. 

Tout d'abord, creez un fichier web.sitemap a la racine du site dans lequel vous 
definirez la hierarchie du plan de site. 

<?xml version="1.0" encoding="utf-8" ?> 
<siteMap xmlns= 

" http : //schemas .mi crosof t . com/AspNet/Si teMap-Fi 1 e-1 . 0" > 
<siteMapNode url="default.aspx" ti tle="Accueil " 
description=""> 

<siteMapNode url="pagel.aspx" title="Pagel" 
description=""> 

<siteMapNode url="pagell.aspx" title= "Pagel. 1" 
description="" /> 

<siteMapNode url="pagel2.aspx" title="Pagel.2" 

description="" /> 

</siteMapNode> 

<siteMapNode url="page2.aspx" title="Page2" 
description=""> 

<siteMapNode url="page21.aspx" title="Page2. 1" 
description="" /> 

<siteMapNode url="page22.aspx" title="Page2.2" 

description="" /> 

</siteMapNode> 

</siteMapNode> 

</siteMap> 
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Deposez ensuite un controle TreeView : 

<asp : TreeVi ew ID= " tvSi teMap" runat=" server"x/asp : TreeVi ew> 

Puis deposez un controle Si teMapDataSource : 

<asp: Si teMapDataSource ID="SiteMapDataSourcel" 
runat="server" /> 

Enfin, affectez a la propriete DataSourcelD du TreeView la valeur de l'identifiant 
du controle Si teMapDataSource : 

DataSourceID="SiteMapDataSourcel 

Votre page affiche alors une arborescence representant le plan de site. 



Le controle Si teMapDataSource se lie aux donnees de plan de site et affiche 
les nceuds en fonction d'un noeud de demarrage specifie dans la hierarchie de 
plan de site. Par defaut, ce noeud correspond au noeud racine de la hierarchie, 
mais il peut egalement s'agir d'un autre noeud de la hierarchie. Le noeud 
de demarrage peut etre specifie par les proprietes StartFromCurrentNode, 
StartingNodeUrl ou StartingNodeOffset. 

Assistant Configuration de source de donnees 

Pour lier un controle TreeView a une source de donnees, vous pouvez egalement 
utiliser l'Assistant Configuration de source de donnees. Vous pouvez l'ouvrir a 
partir de la propriete DataSourceld dans l'Editeur de proprietes et soit utiliser 
une source de donnees existante, soit en creer une nouvelle. 



H Accuei 
i Pagel 



Page 1.1 
Page 1.2 



- Page2 



Page2.1 
Page2.2 



A Figure 19-12 : Arborescence de 
plan de site 




V 



Figure 19-13 : 

Propriete 
DataSourceld 



(Auoin) 

<Nouvelle source de donnees... > 



Vous pouvez selectionner un controle Si teMapDataSource. 
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sistant Configuration de source de donnees 



Hp 



Choisir un type de source de donnees 



A partir d'oii ('application obtiendra-t-elle les donnees ? 



<» ft 



Connectez-vous a I'arborescence de navigation du site pour cette applicatiori (necessite un fichier de sitemap 
valide a la racine de I'application). 



Spedfiez un ID pour la source de donnees : 
SiteMapDataSourcel 



▲ Figure 19-14 : Ajout d'un controle SiteMapDataSource 
Vous pouvez egalement selectionner un controle Xml DataSource. 



Assistant Configuration de source de donnees 



Choisir un type de source de donnees 



A partir d'oii I'application obtiendra-t-elle les donnees ? 



Connexion a un fichier XML. 



Spedfiez un ID pour la source de donnees : 
XmlDataSourcel 



OK | Annuler | 



▲ Figure 19-15 : Ajout d'un controle XmlDataSource 
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19.7 Check-list 

Le controle TreeView etait tres attendu par les developpeurs car de nombreuses 
fonctionnalites necessitent de faire appel a une d'arborescence pour afficher des 
donnees hierarchiques. II s'agissait de fournir un controle capable de satisfaire 
tous les cas possibles. 

De ce point de vue, TreeView repond parfaitement a cette demande puisqu'il 
dispose notamment des fonctionnalites suivantes, dont vous avez pu avoir un 
apercu dans ce chapitre : 

■ affichage des donnees statiques et dynamiques ; 

■ personnalisation des styles ; 

■ association d'images aux noeuds ; 

■ remplissage dynamique des noeuds ; 

■ remplissage des noeuds sans rechargement de page ; 

■ liaison de donnees entre les proprietes du controle et la source de donnees. 
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Site multilingue auec 
stockage des ressources 
en base de donnees 



Classes et espaces de noms utilises 300 

Configuration 301 

Ressources globales et ressources locales .... 302 

Expressions de ressource 305 
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a la localisation 308 

Implementation d'un fournisseur 

de ressources 313 

Check-list 318 
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| Site multilingue avec stockage des ressources en base de donnees 



La localisation d'un site web est souvent aussi primordiale que difficile a mettre 
en ceuvre. II s'agit de traduire tous les textes a afficher mais egalement le format 
des dates, des nombres ou encore des prix, qui varie selon la culture. On parle 
en effet de culture et non de langue, car une meme langue peut regrouper 
plusieurs pays et cultures differents. 

Les developpeurs qui souhaitent creer une application multilingue devront 
adapter toutes leurs pages a la culture de l'utilisateur en cours. Cela peut meme 
aller jusqu'au sens de lecture (on lit en effet de droite a gauche dans certaines 
cultures). 

Dans ce chapitre, nous aborderons tous les concepts relatifs a la localisation 
d'un site web. Vous aurez ainsi l'occasion de vous familiariser avec le modele 
de localisation d'ASP .NET 2.0 et avec les notions a maitriser. Vous apprendrez 
tout d'abord a localiser les pages d'un site web selon la maniere habituelle, 
c'est-a-dire a l'aide des fichiers XML dans lesquels vous declarerez les cles et 
les valeurs de chaque ressource. Vous verrez ensuite comment etendre ces 
expressions de ressource en implementant un fournisseur de ressources person- 
nalise qui stockera ces dernieres dans une table de base de donnees. 

20.1 Classes et espaces de noms 
utilises 

L'espace de noms System. Global ization regroupe l'ensemble des classes qui 
ont un rapport avec tout ce qui est specifique et qui peut varier selon la culture 
de l'ordinateur ou de l'utilisateur en cours, notamment des classes qui 
interviennent dans differents domaines de la programmation : 

■ les classes de formatage de donnees (dates, nombres...) ; 

■ les classes d'encodage de fichiers et de caracteres (UTF-8, ISO 8859-1, 
Unicode...) ; 

■ les classes de comparaison et des ordres de tri ; 

■ les calendriers speciaux (chinois, gregorien, hebreux, japonais...) ; 

■ les cultures et sous-cultures existantes. 

Les espaces de noms System. Resources et System. Web. UI .Design seront 
egalement utilises lors de P implementation du fournisseur de ressources 
personnalise. Pour commencer, voyons une definition des concepts mis en 
ceuvre lors de la localisation d'un site, et des exemples expliquant la maniere 
traditionnelle de declarer des ressources destinees a traduire le contenu d'un 
site. 
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IMoms de culture 

Un petit rappel s'impose sur les normes concernant les noms de culture. Un 
systeme de code simple et efficace a ete mis en place, permettant de distinguer 
les cultures et leurs sous-cultures. 

Les codes des cultures correspondent aux conventions ISO (International 
Standard Organization). Les deux premieres lettres en minuscules correspon- 
dent a la langue (exemple : fr) et s'appuient sur la norme ISO 639-1, tandis que 
les deux lettres en majuscules (exemple : FR) qui suivent le tiret separateur (-) 
correspondent au code du pays et doivent respecter la norme ISO 3166. La 
culture francaise specifique a la Belgique s'ecrit fr-BE. Le tout est repris dans 
la RFC 3066. 

Extension de fichiers .resx 

Vous retrouverez ces codes dans les extensions des noms de fichier .resx. C'est 
en effet de cette facon que vous distinguerez les fichiers de localisation des 
differentes cultures. Pour recuperer une ressource, le fournisseur de localisation 
recherche en fonction de la cle, la culture la plus adequate. 

Si la culture en cours est es-Mx par exemple, il cherche un fichier avec cette 
extension puis, s'il n'en trouve pas, il remonte a la culture parente et enfin a la 
culture neutre. C'est pourquoi il est indispensable de fournir a chaque fois un 
fichier sans extension de code de culture afin de pouvoir proposer une 
traduction par defaut. 

20.2 Configuration 

La section de configuration globalization du web.config permet de specifier 
des regies d'encodage et de localisation a appliquer par defaut au sein de 
1' application. 

<global ization 

requestEncoding = "format d'encodage" 
responseEncoding = "format d'encodage"" 
fileEncoding = "format d'encodage" 

responseHeaderEncoding = "format d'encodage" 
resourceProviderFactoryType = "type" 
enableBestFitResponseEncoding = "true | false" 

culture="culture" 
uiCulture="cul ture"/> 
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Attributs de I'element globalization 


Attribut 


Description 


culture 


Attribut facultatif. Specifie la culture par defaut. 


f 1 1 eEncodn ng 


Attribut facultatif. Specifie le format d encodage par 
defaut pour l'analyse des fichiers .aspx, .asmx et .asax. 


requestEncoding 


Attribut facultatif. Specifie le format d'encodage suppose 
de chacjue demande entrante, y compris les donnees 
publiees et la chaine de requete. 


responseEncodi ng 


Attribut facultatif. Specifie le format d'encodage du 
contenu des reponses. 


uiCulture 


Attribut facultatif. Specifie la culture par defaut pour le 
traitement des recherches de ressources dependant des 
parametres regionaux. 



Vous verrez plus loin comment initialiser de maniere declarative ou par 
programmation la culture de la page en cours. 



20.3 Ressources globales et ressources 
locales 

Le modele de localisation ASP .NET 2.0 permet aux developpeurs de declarer 
des expressions declaratives implicites ou explicites. 

1 Pour utiliser des fichiers de ressources globales ou locales, il faut commen- 
cer par creer respectivement le dossier App_GlobalRessources ou App_ 
LocalRessources. Pour cela, cliquez du bouton droit sur la racine du site et 
selectionnez le dossier que vous voulez creer dans la liste de repertoires 
speciaux que vous propose le menu Ajouter un dossier ASP.NET. 





an 


Ajouter le dossier ASP.NET ► 


App_Code 




Ajouter une reference... 




App_GlobaResources 




Ajouter une reference Web... 




App_LocalResources 




Afficher le diagramme de classes 




App_WebReferences 




Copier le site Web... 




App_Data 




Options de demarrage. . . 




App_Browsers 




Definir comme projet de demarrage 




Theme 




Afficher dans le navigateur 



▲ Figure 20-1 : Menu Ajouter un dossier ASR NET 



2 Pour ajouter un fichier de ressources, cliquez du bouton droit sur le dossier 
App_GlobalResources dans l'Explorateur de solutions, puis selectionnez la 
commande Ajouter un nouvel element. 
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App GlobalResources 



_J Ajouterunnouvelelement... 



: -l Ajouter un element existant.. 



Figure 20-2 : Commande Ajouter 
un nouvel element 



3 La boite de dialogue Ajouter un nouvel element s'ouvre et vous pouvez 
ajouter un fichier de ressources avec une extension .resx. 



Ajouter un nouvel element - http: //local host/CPE/Babel/ 



EDO 



Modeles Visual Studio installes 

] Fichier XML 
Rapport 

Mes modeles 

J Rechercher des modeles en ligne. . 



9 Fichier texte 

m Diagramme de dasses 



mJJL.'UIJJJlU.IIIJJJJ 



Fichier 



de ressources .NET 



Langage : 



i Placer le code dans un fichier dstmct 

Selecbonner la page maitre 



▲ Figure 20-3 : BoTte de dialogue Ajouter un nouvel element 

Visual Web Developer permet ensuite de modifier les fichiers .resx grace 
a un editeur specifique complet et simple d' utilisation. Les ressources sont 
associees a des cles, c'est-a-dire a des identifiants uniques a partir desquels 
vous pourrez recuperer leurs valeurs. En ce qui concerne les chaines de 
caracteres, les ressources sont presentees dans une grille de donnees qui 
affiche les cles, les valeurs ainsi qu'une colonne de commentaires si vous 
voulez donner des details. 



App_LocalResou.-.ault.aspx.resx 

iMI Chaines » _J Ajouter une ressource - A Supprimer une ressource 





Norn 


Valeur 


Commentaire 




Page. Title 


Titre de la page 






Welcome .Text 


Bien venue 






Welcome. Tooltip 















A Figure 20-4 : Editeur de ressources pour les chaTnes de caracteres 

L'ajout d'une nouvelle ressource se fait tres facilement grace a une ligne vide 
en bas de la grille prevue a cet effet. 
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Ressources globales 

Le repertoire App_GlobalRessources a inserer a la racine du site permet de 
definir les ressources globales, comme les messages d'erreur ou les plans de 
site. 

Ressources localisees 

Le repertoire App_LocalRessources doit etre place dans chacun des repertoires 
du site web ou se trouve une page a localiser. Vous pouvez alors localiser les 
proprietes des controles d'une page Default. aspx en creant le fichier Default, 
aspx.resx correspondant. 

Autres types de ressources 

Une ressource peut etre associee non seulement a du texte mais aussi a d' autres 
fichiers, comme des images ou des fichiers audio. L'editeur de ressources 
permet d'associer et de visualiser ces differents types de fichiers. 



31 Images » 


_] Ajouter une ressource » 




ChaTnes 


Ctrl+1 




m 


Images 


Ctrl +2 




m 


Icones 


Ctrl +3 






Audio 


Ctrl +4 






Fichiers 


Ctrl+5 




Ll 


Autre 


Ctrl +6 





■< Figure 20-5 : Selecteur de type de 
ressource de l'editeur 



Un menu Ajouter une ressource permet egalement d'ajouter facilement les 
differents types de ressources possibles, comme ici une image. II vous sera 
demande la cle que vous voulez lui attribuer et votre editeur d'images par 
defaut se lancera. 



_J Images - 








Ajouter un fichier existant. . . 






Ajouter une nouvelle chaine 






Nouvelle image ► 


Image PNG... 




Ajouter une nouvelle icone 


Image BMP... 




Ajouter un nouveau fichier texte 


Image GIF... 




Image JPEG... 




1 Image TIFF... 







< Figure 20-6 : 

Menu Ajouter une 
ressource 



Dans ce chapitre, nous nous interesserons essentiellement aux chames de 
caracteres qui representent la majeure partie des ressources a localiser. 
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20.4 Expressions de ressource 

II existe plusieurs syntaxes declaratives qui permettent de specifier les ressour- 
ces associees a un controle ou a ses proprietes. De nombreuses proprietes de 
controle serveur peuvent etre localisees. II faut pour cela que la propriete 
possede l'attribut Local izable avec la valeur true. 

II suffit alors d'utiliser la bonne expression pour relier la propriete a la 
ressource a laquelle elle doit etre associee. Vous allez decouvrir les differentes 
manieres de declarer une expression de ressource pour une propriete localisa- 
ble. Mais auparavant, faisons un point sur ce concept d' expression en presen- 
tant ce sur quoi elles reposent, c'est-a-dire les Expression Builders. 

Expression Builders 

Les Expression Builders sont une fonctionnalite de parsing qui permet aux 
developpeurs d'utiliser une syntaxe declarative afin d'affecter certaines pro- 
prietes de controle. Les Expression Builders supportes par defaut sont notam- 
ment les suivants : 



Expression Builders utilisables dans les proprietes des controles serveurs 


Expression Builder 


Description 


Resources 


Utilise pour recuperer une ressource. Exemple : <%$ 
resources: Resourcekey %>. 


Connectionstrings 


Utilise pour acceder a une chaine de connexion. 
Exemple: <%$ connectionstrings: 
ConnectionStringName %>. 


Appsettings 


Utilise pour acceder a un parametre d'application. 
Exemple: <%$ appsettings: AppKey %>. 



La syntaxe a utiliser contient le prefixe $, ce qui la distingue des methodes de 
liaison de donnees (#) et d' interpretation de code (=). 

Vous pouvez implementer vos propres Expression Builders si vous voulez avoir 
a disposition ce genre de fonctionnalite de syntaxe declarative. Vous devrez 
pour cela heriter des classes ExpressionBuilder et ExpressionBuilderEditor. 

Cette fonctionnalite etant explicitee, passons maintenant aux expressions qui 
nous interessent tout particulierement, c'est-a-dire les expressions de ressource. 
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Expressions implicites 

Les expressions implicites servent a declarer un prefixe de ressource associe a 
un controle. 

<asp:Control ID=" Id" runat="server" 

meta:resourcekey="prefixe de ressource" /> 

Vous pouvez ensuite utiliser ce prefixe pour specifier les proprietes que vous 
voulez affecter. II vous suffira de declarer une ressource dont la cle sera 
constitute de ce prefixe et de la propriete du controle que vous voulez localiser, 
le tout separe par un point. 

Par exemple, pour localiser la propriete Text d'un controle Label pour lequel 
vous avez affecte a l'attribut meta:resourcekey la valeur MonLabel, vous 
utiliserez comme cle de ressource MonLabel .Text. Vous aurez ainsi acces a 
l'ensemble des proprietes localisables tout en n'ayant fourni qu'un seul prefixe. 

Expressions explicites 

Les expressions explicites utilisent une syntaxe qui permet d' affecter aux 
proprietes des cles de ressource globale ou locale. La syntaxe de declaration est 
la suivante : 

<%$ Resources: [fichier resX global,] cle de ressource%> 

Voici un exemple de l'affectation de la propriete Text d'un controle Label par 
une ressource globale : 

<asp:Label ID=" Label 1" runat="server" 

Text='<%$ Resources: monFichierResX, maCle%>' /> 

Pour comprendre un peu mieux cette syntaxe, consultez la section suivante sur 
les Expression Builders. 

Assistant d'affectation des ressources 

f 1 Un Assistant est egalement fourni dans l'editeur de proprietes en mode 
Design pour faciliter l'affectation des ressources aux proprietes des 
controles. Pour y avoir acces, selectionnez le controle dont vous voulez 
localiser les proprietes, puis affichez la fenetre Proprietes. Une zone d'edition 
speciale nominee (Expressions) de la categorie Donnees permet alors d'afficher 
1' Assistant a l'aide d'un bouton : 



Figure 20-7 : Proprietes 
(Expressions] d'un controle 



□ Donnees 




(Expressions) 


1 Q 
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Cet Assistant dispose de nombreuses fonctionnalites interessantes qui permet- 
tent d'associer des cles de ressource globale ou locale a chaque propriete 
localisable du controle en cours d' edition. 

Si vous avez utilise la syntaxe avec l'Assistant Expression Builder, l'Assistant 
saura recuperer les attributs que vous avez configures et affichera des icones 
differentes devant les proprietes localisees. 



Expressions IblWelcome 



Selectionnez la propriete a laquelle vous souhaitez vous lier. Vous pouvez ensuite la lier en 
selectionnant un type d'expression et en definissant les proprietes de cette expression, 

Proprietes pouvant etre liees : 
ill BorderStyle 
ffl BorderWidth 
M CssClass 
ill Enabled 
M EnableTheming 



Type d'expression : 
Resources 

Proprietes de I'expression : 



i=] EnableViewState 
SI ForeColor 
ill Height 
M SkinID 
H Tablndex 
El Text 





ClassKey 




ResourceKey 


Welcome 





ClassKey 

Dans le cadre d'une ressource globale, spedfiez le 
nom de la dasse de la ressource (par exemple, le 
nom d'un fichier .resx dans le dossier 
App_GlobalResources). Pour une ressource locale 
(par exemple, un fichier .resx dans le dossier App... 



OK 



Annuler 



A Figure 20-8 : Assistant de ressources 

Dans l'editeur de proprietes, si vous associez une expression de ressource a la 
propriete, elle s'affiche de maniere un peu differente dans la liste : 

■< Figure 20-9 : Propriete Text associee a une 
expression de ressource 



PJ Expression: Welcome 



Si le richer .resx contient des cles de ressource, une liste vous permettra de 
selectionner la cle que vous voulez associer a la propriete en affichant toutes 
celles disponibles dans le fichier. 



Type d'expression : 


Resources 


v 


Proprietes de I'expression : 


ClassKey 




H ResourceKey 


Welcome v 




PageResource 1. Title 


ResourceKey 


Welcome .Text 


Cle specifiant la ressourc 


Welcome .ToorTip 



Figure 20-10 : 

Liste des ressources 
disponibles 



Si, comme nous vous l'avons conseille, vous avez plutot affecte l'attribut 
meta:resourcekey, l'Assistant affiche alors un texte qui indique que les 
proprietes ne peuvent pas etre editees. Vous pouvez neanmoins distinguer les 
proprietes inscrites dans le fichier .resx grace a une icone specifique. 
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Expressions IblWelcome 




Selectionnez la propriete a laquelle vous souhaitez vous lier. Vous pouvez ensuite la lier en 
selectjonnant un type d'expression et en definissant les proprietes de cette expression. 


Proprietes pouvant etre liees : 






ffl CssClass 
M Enabled 
ill EnableTheming 
!i=] EnableViewState 
Hfl ForeColor 
ill Height 
SkinID 




Le controle utilise de maniere implidte une ressource 
spedfiee dans son attribut meta: et une valeur de 
cette propriete est definie dans la ressource (par 
exemple, dans un fichier ,resx du dossier 
App_LocalResource). Pour creer une expression de 
ressource explidte pour cette propriete, supprimez 
l'attribut meta: du controle ou bien la valeur de la 
propriete dans la ressource. 




ml Tablndex 








i Text 








j ll?!irl 

M Visible 








OK Annuler 



▲ Figure 20-1 1 : Assistant de ressources d'un controle dont l'attribut 
meta:resourcekey est defini 



20.5 Fonctionnalites interessantes 
relatives a la localisation 

Acces par programmation aux ressources 

Vous pouvez recuperer les valeurs des ressources que vous avez creees dans 
votre code grace a deux methodes : GetGl obal ResourceObject et GetLocalRe- 
sourceObject. Elles prennent en parametre la cle de la ressource : 

Buttonl . Text = Get Local ResourceOb j ect (" Button 1 . Text " ) . ToStri ng () 

Imagel . IraageUrl = CType(GetGl obal ResourceObject 
("RessourcesGlobales", "LogoUrl"), String) 

Localisation de plans de site 

Les proprietes des nceuds des plans de site peuvent egalement etre localisees. 
Pour ajouter un plan de site, cliquez du bouton droit sur la racine du site dans 
l'Explorateur de solutions, puis selectionnez la commande Ajouter un nouvel 
element. La boite de dialogue Ajouter un nouvel element s'ouvre alors. Vous 
pouvez ajouter un fichier de plan de site, avec une extension .sitemap. 
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Ajouter un nouvel element - http://localhost/CPE/Babel/ 



Modeles Visual Stud 10 installes 








JjJ Web Form 
Page HTML 
Aj Feuille de style 
9 Fichier XML 
^Fichier de ressources 
<^ Gestionnaire generique 
gfWeb Form Mobile 
^] Fichier JScript 
^Fichier d'apparence 


_^ Page maitre ^\ Controle utilisateur Web 

B Service Web Classe 

^ Classe d' application globale j^Rchier de configuration Web 

[3 Schema XML ^ Fichier texte 

I J Base de donnees SQL j^j DataSet 

*^S3I3E3 3jRchier VBSaipt 

Rapport .^Controle utilisateur Web Mobile 
^Fichier de configuration Web Mobile jjf Fichier XSLT 
■ij Fichier browser ^ Diagramme de dasses 




Mes modeles 








__j Rechercher des modeles en ligne. . 






v 


Fichier utilise pour creer un plan de site 



Nom : | Web. sitemap 

Langage ; Visual Basic vl D PJacer le code dans un fichier distinct 

Selectionner la page maitre 



Ajouter ~] [ Annuler | 



▲ Figure 20-12 : Ajoutd'un plan de site 



^ Fournisseur de navigation par defaut 

Le fournisseur de navigation par defaut est charge de recuperer le fichier 
web.sitemap situe a la racine du site web. Si vous appelez votre plan de site 
comme cela et si vous le placez au bon endroit, vous n'avez pas a I'ajouter dans 
la section de configuration des fournisseurs de navigation. 



Vous pouvez utiliser un fichier de ressources pour que les titres et les 
descriptions des pages dans vos controles de navigation soient traduits. La 
syntaxe a utiliser pour localiser un noeud ressemble beaucoup aux expressions 
de ressource mais varient un peu car elle est adaptee au fichier XML : 



<?xml version="1.0" encoding="utf-8" ?> 




<siteMap xmlns="http://schemas. microsoft. 


com/AspNet/ 


SiteMap-File-1.0" enableLocal ization= 


'true"> 


<si teMapNode url ="~/defaul t .aspx" 




title="$resources: SiteMap, Home, 


Accueil " 


description=""> 




</siteMapNode> 




</siteMap> 
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Pour cela, vous devez activer la localisation en affectant la value true a 
l'attribut enableLocalization du noeud racine du plan de site. 

Vous pouvez utiliser un fichier de ressources locales ou aller chercher vos cles 
dans un fichier de ressources globales. Pour les ressources globales, la syntaxe 
a employer est : 

$resources:ClassName, KeyName, DefaultValue 

Vous avez egalement la possibility de specifier l'attribut resourcekey, qui a la 
meme fonction que l'attribut meta: resourcekey mais pour les nceuds XML. 



Generation automatique de ressources locales 

Visual Web Developer integre une fonctionnalite de generation automatique des 
ressources locales contenues dans une page. Cela permet de generer de maniere 
simple l'ensemble des ressources relatives a une page. II suffit pour cela de faire 
basculer l'editeur de la page en cours en mode Design, plutot qu'en mode 
Source, puis de cliquer sur le bouton Generer la ressource locale de la barre 
d'outils Mise en forme. 



Internet Explorer 6.0 - _J _ 

Generer la ressource locale 



Un fichier .resx correspondant au nom de la page en cours sera alors 
automatiquement cree. Vous retrouverez dans ce fichier la totalite des ressour- 
ces affectees aux proprietes des controles. Ces proprietes seront egalement 
modifiees pour correspondre a la syntaxe d' affectation des ressources. En effet, 
si vous n'avez specifie aucune expression de ressource pour une propriete 
localisable, l'attribut meta: resourcekey sera ajoute automatiquement avec 
comme valeur l'identifiant du controle. Meme la directive de page subira cette 
modification, ce qui permettra entre autres de pouvoir localiser le titre de la 
page. Vous n'aurez alors plus qu'a vous servir de ce fichier comme modele afin 
de creer les fichiers de localisation pour les autres cultures. 



i-igure iu- i J : tsoucon uenerer la 
ressource locale de la barre d'outils Mise en 
forme 



^arque 

^* Barre d'outils Mise en forme 



|E m« «n forme | gj | a iqq^q d'outils Mse en forme n'est pas disponible, cliquez du 
bouton droit sur un emplacement libre de la zone des barres d'outils. Un menu 
apparaTt alors dans lequel vous pouvez selectionner cette barre. 
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II est done preferable de ne realiser cette action que lorsque vous etes certain 
que vous n'allez plus ajouter des controles a la page. L'avantage lors du 
developpement de vos pages est que vous devez uniquement vous soucier de 
placer les textes qui seront a traduire dans des proprietes ou des controles 
localisables. Afin de mieux controler le nom des ressources, veillez neanmoins 
a specifier l'attribut meta: resourcekey de chaque controle. La localisation peut 
alors etre deleguee a n'importe quelle personne sachant se servir de l'editeur de 
ressources, et done sans connaissance requise en programmation. 



Auto-detection de la culture du navigateur 

Vous pouvez facilement adapter le comportement de votre application a la 
culture de l'utilisateur en cours en vous basant sur le langage du navigateur 
Internet qu'il utilise pour y acceder. Pour cela, il suffit de specifier les attributs 
culture et ui Culture avec la valeur auto dans la directive de page. Vous 
pouvez egalement preciser une culture par defaut en l'ajoutant apres un 
deux-points (:) : 

<%@ Page Culture="auto:fr-FR" %> 

Voici les quelques etapes a suivre afin de declarer plusieurs cultures pour votre 
navigateur et de basculer entre elles pour effectuer vos tests. Cette procedure 
montre comment configurer Internet Explorer, mais tous les navigateurs Inter- 
net ont cette meme fonctionnalite. 

1 Dans le menu Outils, cliquez sur la commande Options Internet. Dans la 
fenetre qui s'ouvre, sous l'onglet General, cliquez sur le bouton Langues 
situe en bas. 



General Securite ConfidentiaHe Contenu Connexions Programmes Avarice 
page be demarrage. 



3 demarrage 

Vous pouvez choisir la page a utiliser ci 



Adresse : http://www.wygwam.com 
-'a 3e a:iuele ~| [ Page par defaut 



Page vierge ] 



Internet temporaires 

Les pages Web que vous consultez sont stockees dans un dossier pour 
■j'" affichage ulleneur plus rapide. 



[Supprimerles eopkies . | | Supprimer les fichiers. 



Histonque 

Le dossier Hstorique contient les liens vers les pages que vt 
recemment affichees. afin dV acceder rapidement 



a: 



BTacer I'Historique 



| Pofces~ 



Annulet ~] | ^ipliquer | 



▲ Figure 20-14 : Fenetre Options Internet 
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2 La boite de dialogue Langues s'ouvre alors avec la liste des cultures 
disponibles. Des boutons Monter et Descendre permettent de placer les 
cultures dans l'ordre de preference. 



Certains sites Web proposent des contenus multilingues. Vous 
pouvez choisir plusieurs langues d-dessous ; elles seront traitees 
par ordre de priorite. 

Langue : 



Ajouter.. 



Actuellement, les menus et les boltes de 
dialogue sunt affiches en Franze s [France). 



Figure 20-1 5 : 

BoTte de dialogue 
Langues 



3 Le bouton Ajouter ouvre une liste a partir de laquelle vous pouvez 
selectionner les cultures que vous voulez ajouter et les ordonner pour 
placer en tete celle que vous preferez. 



Ajouter une langue 



Langue : 



Anglais file de laTrinite) [en-tt] 
Anglais (Irlande) [erne] 
Anglais (Jamaique) [en-jm] 
Anglais (Nouvelle-Zelande) [en-nz] 
Anglais (Philippines) [en-ph] 
Anglais (Royaume-Uni) [en-gb] 
ibjv^^gww 



Arabe (Algerie) [ar-dz] 
Arabe (Arabie saoudite) [ar-sa] 
Arabe (Bahrein) [ar-bh] 
Arabe (E.A.U.) [ar-ae] 
Arabe (Egypte) [ar-eg] 
Arabe (Irak) [ar-iq] 



v 



A Figure 20-1 6 : 

Liste des cultures 
disponibles 
susceptibles d'etre 
ajoutees 



Initialisation de la culture d'une page 

Pour initialiser la culture d'une page si, par exemple, vous l'avez stockee par un 
mecanisme de persistence personnalise (session, profil, viewstate, cookie...), le 
moyen le plus indique est de substituer - redefinir - la methode Initialize 
Culture d'une page. II suffit alors d'indiquer la culture a utiliser via les 
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proprietes CurrentCul ture et CurrentUICul ture de la classe System. Threa 
ding. Thread. CurrentThread, qui correspondent a la culture en cours. 

Voici un exemple sur lequel vous pouvez vous baser pour ecrire ce genre de 
code d' initialisation de la culture : 

Protected Overrides Sub InitializeCultureQ 

System. Threadi ng . Thread . CurrentThread . CurrentCul ture 
= System. Globalization. Culturelnfo. 
CreateSpecificCul ture("fr-FR") 
System. Threadi ng . Thread . CurrentThread . 

CurrentUICul ture = New System.Globalization. 
CultureInfo("fr-FR") 
MyBase. Initial izeCultureQ 
End Sub 



20.6 Implementation d'un fournisseur 
de ressources 

Vous allez maintenant passer a 1' implementation du fournisseur de ressources 
qui va permettre de stocker les ressources dans une base de donnees. Le 
principe est de creer une classe qui herite de la classe abstraite ResourcePro- 
viderFactory et d'y implementer vos propres methodes de stockage et de 
recuperation des ressources. Ensuite, il suffit de modifier dans le web.config 
l'attribut resourceProviderFactoryType de la section globalization afin d'in- 
diquer au site web que vous utilisez, non plus le mecanisme de localisation par 
defaut, mais le votre. 

<global ization 

resourceProviderFactoryType="SQLResourceProviderFactory"/> 

Avant d'entrer dans le detail des developpements a effectuer, vous allez tout 
d'abord creer la base de donnees destinee a stocker les ressources. 

Acces aux donnees 

Afin de stocker les ressources, vous allez creer la base de donnees SQLExpress 
nommee Localisation et la table Resource correspondante qui stockera les 
ressources. 

1 Vous allez tout d'abord ajouter le dossier ASP .NET App_Data et y ajouter 
votre base de donnees. 
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Ajouter un nouvel element - http: //local host/CPE/Babel/ 



E3 □ 



Modeles Visual Studio installed 



3 Fichier XML 



Base de donnees SQL 



Schema XML 
| Rapport 



ij] Fichier texte 

B Diagramme de dasses 



J Rechercher des modeles en ligne. . 



Base de donnees SQL vide 



Norn: 

Langage : 



Localisation, mdf 



Placer le code dans un fichier distinct 
Selectionner la page maitre 



C 



Ajouter 



▲ Figure 20-1 7 : BoTte de dialogue Ajouter un nouvel element 

Cette table servira a la fois aux ressources globales et aux ressources 
locales puisque ce qui les differencie n'est en realite que le nom de la 
classe de ressource globale. La structure de la table est done prevue pour 
recevoir l'ensemble des informations specifiques aux expressions de 
localisation. 

Les champs sont les suivants : 

- virtualPath : le nom de la page pour une ressource locale. 

- className : le nom de la classe pour une ressource globale. 

- cultureName : le code de la culture. 

- resourceName : la cle de la ressource. 

- resourceValue : la valeur de la ressource. 



dbo.ResoureeL-USATION.MDF) 




Nom de la colonne 


Type de donnees 


Null autorise 


► 


virtualPath 


nvarchar(255) 


0 




dassName 


nvarchar(50) 


0 




cultureName 


nchar(lO) 


0 




resourceName 


nvarchar(255) 


0 




resourceValue 


ntext 


0 






□ 



Figure 20-18 : 

Structure de la table 
Resource 
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2 Apres avoir cree la table, utilisez l'Explorateur de serveur pour naviguer 
dans la base et selectionner la table Resource. 



Explorateur de serveurs ▼ -c X 


ja_ 




%% 




jj Connexions de donnees 




Q 


b Localisation. mdf 








_i 


Schemas de base de donnees 










Tables 








0 












t\ virtualPath 










_0 dassName 










_0 cultureName 










j] resourceName 










J] resourceValue 



Figure 20-19 : Affichage de la 
base de donnees dans l'Explorateur 
de serveur 



3 Vous pouvez ensuite afficher les donnees de la table en cliquant dessus du 
bouton droit et en selectionnant la commande Afficher les donnees de la 
table. 



Explorateur de serveurs 



^1 ■! 

Q (jl Connexions de donnees 
S Localisation. mdf 

+i J Schemas de base de donnees 

B □ Tab les 



ffl E2 
a □ 

® a 
® □ 

Serveur 



Ajouter une nouvelle table 
Ajouter un nouveau dedencheur 
Nouvelle requete 
Ouvrir la definition de table 



_]' Afficher les donnees de la table 



-J 


Copier 


>< 


Supprimer 


n 


Actualiser 




Proprietes 



Figure 20-20 : 

Commande Afficher 
des donnees de la 
table 



4 II suffit alors d'ajouter les ressources dont vous voulez disposez a l'aide de 
la grille de donnees qui affiche chaque enregistrement ainsi que les 
colonnes. 



Resource: Req...USATION.MDF)J 




virtualPath 


dassName 


cultureName 


resourceName 


resourceValue 


► 


SH3linCflM| 


NULL 


fr-FR 


Welcome 


Bienvenue 




default.aspx 


NHL 


en -US 


Welcome 


Welcome 


* 


NULL 


NULL 


NHL 


NULL 


NULL 



A Figure 20-21 : Affichage des donnees de la table 



Le guide du codeur • 315 



I Site multilingue avec stockage des ressources en base de donnees 



ResourceProviderFactory 

Deux methodes principales doivent notamment etres substitutes : CreateLocal 
ResourceProvider et CreateGlobalResourceProvider. 

Cette classe est assez simple puisqu'elle utilise un objet SQLResourceProvider 
qui englobe toute la logique de recuperation des ressources : 

Public Notlnheri table Class SQLResourceProviderFactory 
Inherits ResourceProviderFactory 

Public Overrides Function CreateLocal ResourceProvider 
( ByVal virtual Path As String) As IResourceProvider 
virtual Path = 

System. 10. Path .GetFi 1 eName (vi rtual Path) 
Return New SQLResourceProvider(vi rtual Path, 
Nothing) 
End Function 

Public Overrides Function 

CreateGlobalResourceProvider ( 

ByVal className As String) As IResourceProvider 

Return New SQLResourceProvider(Nothing, className) 
End Function 
End Class 

SQLResourceProvider 

La classe SQLResourceProvider implemente l'interface IResourceProvider et 
doit done fournir 1' implementation de la methode GetObject, qui renverra une 
ressource, et de la propriete ResourceReader, qui renverra un enumerateur de 
ressources. 

SQLResourceHelper 

Cette classe d'aide a la recuperation et au stockage des ressources est chargee 
de realiser les acces en base. Elle contient done une methode GetResources de 
recuperation des ressources. Son prototype est le suivant : 

Public Shared Function GetResources ( 
ByVal virtualPath As String, 
ByVal className As String, 
ByVal cultureName As String, 
ByVal designMode As Boolean, 

ByVal serviceProvider As IServiceProvider) As IDictionary 

Selon les parametres passes (si leur valeur est nulle ou non), cette methode 
renvoie des ressources globales ou locales pour une certaine culture. Par 
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exemple, la recuperation d'une ressource locale necessitera le nom du nchier, 
et non le nom de la classe, tandis que pour une ressource globale, ce sera 
l'inverse. 

SQLDesignTimeResourceProviderFactory 

Pour que la fonctionnalite de generation automatique soit egalement prise en 
charge par votre fournisseur de ressources, vous devez creer une classe 
SQLDesignTimeResourceProviderFactory qui herite de DesignTimeResourcePro- 
viderFactory dans l'espace de noms System. Web. UI .Design. 

Cette classe peut etre aussi simple que ResourceProviderFactory puisqu'elle 
aussi delegue toutes ces operations complexes a deux classes, DesignTime 
Global ResourceProvider et DesignTimeLocal ResourceProvider. 

Public Class SQLDesignTimeResourceProviderFactory 
Inheri ts Desi gnTimeResourceProvi derFactory 
Public Overrides Function 

CreateDesignTimeGlobal ResourceProvider(_ 

ByVal serviceProvider As IServiceProvider, 

ByVal applicationKey As String) 

As IResourceProvider 

Return New DesignTimeGlobal ResourceProvider 
(appl icationKey) 
End Function 

Public Overrides Function 

CreateDesignTimeLocalResourceProvider( 
ByVal serviceProvider As IServiceProvider) 
As IResourceProvider 

If Jocal ResourceProvider Is Nothing Then 
Jocal ResourceProvider = 

New DesignTimeLocal ResourceProvider _ 
(serviceProvider) 

End If 

Return Jocal ResourceProvider 
End Function 

Public Overrides Function 

CreateDesignTimeLocalResourceWriter(_ 
ByVal serviceProvider As IServiceProvider) 
As IDesignTimeResourceWriter 
Return New DesignTimeLocal ResourceProvider 
(serviceProvider) 
End Function 
End Class 

Apres toutes ces etapes, votre fournisseur de ressources stockees dans une base 
de donnees est maintenant effectif. II ne reste plus qu'a creer les pages et a 
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ajouter les ressources pour localiser les proprietes des controles que vous 
voudrez traduire pour differentes cultures. 

20.7 Check-list 

La localisation des sites web a ete considerablement simplifiee avec le 
Framework ASP .NET 2.0. II fournit desormais nativement une fonctionnalite 
de declaration des ressources par culture dans des fichiers XML et un 
mecanisme d' affectation de ces ressources a des proprietes de controle grace a 
une syntaxe declarative. 

Vous pouvez de plus implementer vos propres methodes de stockage et de 
recuperation des ressources. 

Dans ce chapitre, nous avons aborde les sujets suivants : 

■ la localisation d'un site web a l'aide de fichier .resx ; 

■ l'acces declaratif et imperatif aux ressources dans les pages web ; 

■ l'acces par programmation aux ressources ; 

■ la localisation de plans de site ; 

■ 1' initialisation de la culture d'une page ; 

■ la generation automatique de ressources locales ; 

■ 1' auto-detection de la culture d'un navigateur ; 

■ 1' implementation d'un fournisseur de ressources pour stocker des ressour- 
ces dans une base. 
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Atlas 



Atlas est un Framework gratuit qui permet de developper des applications web 
de nouvelle generation, plus riches, plus interactives et multinavigateurs. 

Apres une presentation d'Atlas, vous utiliserez les controles Atlas a travers 
quelques exemples. Vous decouvrirez avec quelle facilite il est possible de 
developper des fonctionnalites qui necessitaient auparavant des connaissances 
avancees de langages cote client, comme JavaScript. 

21.1 Presentation d'Atlas 

Atlas se presente comme une extension du Framework .NET 2.0. II permet aux 
developpeurs de creer des applications web riches, qui tirent avantage a la fois 
des fonctionnalites du navigateur et du code serveur. 

Ajax et XMLHttp Request 

Ce type de developpement qu'utilise Atlas est fortement lie au concept d'Ajax 
(Asynchronous JavaScript and XML). Ce terme est maintenant largement 
employe et parfois meme usurpe. II represente a la fois la technologie d'appel 
de procedure de maniere asynchrone et un ensemble de technologies. 

Les navigateurs evolues sont capables d'utiliser l'objet XMLHttpRequest, qui 
peut etre appele a l'aide de code JavaScript pour faire des appels au serveur. 
Cela permet notamment de realiser des rafraichissements partiels de page. Le 
probleme principal que Ajax tente de resoudre est enracine dans le protocole 
HTTP lui-meme. Les navigateurs communiquent en effet via HTTP avec les 
serveurs web pour recuperer le contenu des pages et publier leurs donnees. Le 
protocole est sans etat, ce qui signifie que la conservation de la saisie de 
l'utilisateur entre chaque appel de page est a la charge du serveur. 

Bibliotheque de scripts clients 

La bibliotheque de scripts clients d'Atlas est divisee en plusieurs parties. 

Le script principal comprend les couches inferieures sur lesquelles le reste est 
construit. On trouve ensuite la couche de compatibilite internavigateur. II s'agit 
d'une abstraction permettant d'ecrire des scripts sans se soucier de savoir s'ils 
vont fonctionner sur tous les navigateurs. En outre, grace a cette couche, Atlas 
pourra evoluer en fonction des ameliorations des navigateurs. 

Le systeme de types se trouve au-dessus de cette couche de compatibilite. II 
permet de developper du JavaScript avec une approche orientee objet. Vous 
pouvez ainsi creer des espaces de noms et des classes. L'heritage est egalement 
pris en charge ainsi que les interfaces, les delegues et les enumerations, en 
d'autres termes la plupart des concepts que vous retrouvez dans les langages du 
Framework .NET. 
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La bibliotheque de classes de base complete la bibliotheque de scripts. Vous 
retrouverez done des classes et espace de noms habituels. 

Les fonctionnalites du Framework Atlas ne se limitent pas a une bibliotheque 
de scripts Ajax. On y trouve aussi des fonctionnalites cote serveur qui 
permettent d'ameliorer facilement les applications ASP .NET existantes. 

Controles Atlas 

L' architecture d'Atlas se compose d'un modele de composants et de controles. 
Les controles serveurs permettent notamment d'eviter les rafraichissements de 
page. 

Le controle ScriptManager modifie le comportement de publication client 
tandis que le controle UpdatePanel gere le cycle de vie de la page cote serveur 
avant d'effectuer les changements necessaires. 

Affectez la propriete EnablePartial Rendering du ScriptManager a true : 
<atl as: ScriptManager EnablePartialRendering="true" runat="server" /> 

L'etat de la page est rendu persistant au travers des requetes de rendu partiel. 
Le code HTML est quant a lui mis a jour a l'aide de code JavaScript agissant 
sur le Document Object Model (DOM). 

Atlas supporte egalement la serialisation des donnees des web services en 
JSON. Les donnees JSON peuvent etre deserialisees directement vers les objets 
JavaScript plus ou moins complexes. Cela simplifie Faeces aux services web a 
partir du navigateur. 

21.2 Installation 

Tout d'abord, vous devez installer Atlas sur votre machine de developpement. 
Pour cela, telechargez l'executable d'installation d'Atlas. Vous le trouverez 
facilement sur le site officiel http://atlas.asp.net. Vous y trouverez en outre de 
nombreux articles, les dernieres actualites ainsi que des exemples d' applica- 
tions et d'autres ressources. Voici les differentes etapes pour proceder a 
F installation du Framework Atlas. 

1 Lancez l'executable AtlasSetup.msi. L' Assistant d'installation s'ouvre. 
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i$ Microsoft ASP.NET codename "Atlas" 



Welcome to the Microsoft ASP.NET codename 
"Atlas" Setup Wizard 



The installer will guide you through the steps required to install Microsoft ASP NET codename 
"Atlas" on your computer. 




WARNING This computer program is protected by copyright law and international treaties. 

U nauthori2ed duplication or distribution of this program, or any portion of it. may result in severe civil 

or criminal penalties, and will be prosecuted to the maximum extent possible under the law. 



| Next> | 



▲ Figure 21-1 : Lancement de I'Assistant d'installation d'Atlas 

2 Cliquez sur Suivant puis accepter le contrat d' utilisation. 

3 Cliquez de nouveau sur Suivant. L'Assistant vous demande si vous 
souhaitez installer le modele de projet Atlas pour Visual Studio. 



r'i? Microsoft ASP.NET codename "Atlas" 



Install "Atlas" Visual Studio Project Template 




The "Atlas" Visual Studio Project Template installation requires Visual Studio 2005 or Visual Web 
Developer Express. 



0 Install "Alas" Visual Studio Project Template 



<Eack Next> 



▲ Figure 21-2 : Case a cocher Installer le modele de projet Visual Studio Atlas 

4 Cliquez sur Suivant. Une case a cocher vous propose d'enregistrer 
1' extension de fichier .asbx dans IIS. 
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i',? Microsoft ASP.NET code 



Register .asbx file extension in IIS 



□ s 



The .asbx extension is uied for bridging external web services. It you do not register the .asbx file 
extension in IIS, you must use a special axd extension to make reguests to the web service bridge. 
Please see the Quickstatts for more details on using the special .axd extension. 

0 Register the asbx file extension in IIS 



▲ Figure 21-3 : Ajout de I'extension de fichier .asbx dans IIS 

L'extension .asbx designe les fichiers Atlas qu'on appelle "bridges". II 
s'agit de composants qui communiquent avec des services web situes en 
dehors de votre application. 

Terminez 1' installation. Les fichiers associes sont installes dans le reper- 
toire C:\Program Files\Microsoft ASP.NEVAtlas. 

Si vous avez choisi d'installer le modele de projet Visual Studio Content, 
l'Assistant d' installation se lance. Le premier ecran affiche les modeles qui vont 
etre installes et vous permet de ne selectionner que ceux qui vous interessent. 



0>* 



d 'installation de content! Visual Studio 



Selectionner le contenu a installer 



Quels sont le ou les elements de contenu que vous sou ha it ez installer ? 



Modeles et Starter Kits 

0 "Atlas" Web Application (VB) 
0 "Atlas' Web Application (C#) 



flfficher les fichiers dans I'Explorateur Wjndoiijs.. 
Informations sur fediteur 
Editeur r Microsoft Corporation 

URL 



d'information ; 



http://atla5.asp.nety' 



[ Suivant > | [ Annuler j 



A Figure 21-4 : Liste des projets a installer 
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7 Vous pouvez ensuite cliquer sur Terminer pour executer 1' installation. Les 
liens situes derriere chaque projet installe fournissent des informations sur 
le deroulement de 1' installation. 



&. Programme d'i retaliation de contenu Visual Studio 



Installation du contenu 



Etat i Installation terminer. 



V "Alias" Web Application (VB) Installation terminee. 

V "Atlas" Web Application (C=) Installabon terminee. 



A Figure 21-5 : Ecran recapitulatif de I'installation 

21 .3 Creation d'un site web Atlas 

Apres avoir installe le modele de projet Visual Studio, vous pouvez creer un 
nouveau site web Atlas. 

1 Pour cela, cliquez du bouton droit sur la racine de la solution, puis 
selectionnez la commande Ajouter un nouveau site web du menu Ajouter. 

2 Dans la categorie Mes modeles, selectionnez le modele Atlas Web Site. 



JS 5^ .1^ © 



* Vtrk -AUtf Wet> ...... -• 



1W7 : ■ ;.3 IM 



- I' 



DC 



A Figure 21-6 : Ecran recapitulatif de I'installation 
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3 Selectionnez l'emplacement du site, le langage Visual Basic, puis cliquez 
sur OK. 

Le modele de site web Atlas Web inclut l'assembly Microsoft.Web.Atlas.dll dans 
son dossier Bin ainsi qu'un fichier Web.config qui contient des sections 
specifiques permettant d'activer les fonctionnalites d' Atlas. 

Configuration du Web.config 

Les sections de configuration personnalisees permettent de declarer les nouvel- 
les sections que vous pouvez utiliser, comme les services d'authentification et 
de profil asynchrones. 

<configSections> 

<sectionGroup name="microsoft.web" type= 
"Mi crosof t . Web . Conf i gurati on . Mi crosof tWebSecti onGroup"> 
<section name="converters" 

type="Mi crosof t . Web . Conf i gurati on . ConvertersSecti on" 
requirePermission="false"/> 
<section name="webServices" type= 
"Mi crosof t .Web . Conf i gurati on . WebServi cesSecti on" 
requi rePermi ssi on="f al se"/> 

<section name="authenticationService" type= 
"Mi crosof t .Web . Conf i gurati on . Authent i cati onServi ceSecti on" 
requirePermission="false"/> 
<secti on name="prof i 1 eServi ce" 

type="Mi crosof t . Web . Conf i gurati on . Prof i 1 eServi ceSecti on" 
requirePermission="false"/> 
</sectionGroup> 
</configSections> 

II est egalement interessant d'importer les espaces de noms contenant les 
nouveaux controles serveurs integres au Framework Atlas. Cela evite d'inclure 
les directives Register dans chaque page qui utilisera ces controles. 

<pages> 
<control s> 
<add namespace="Mi crosof t .Web. UI " 
assembly="Mi crosof t. Web. Atlas" tagPrefix="atlas"/> 

odd namespace="Microsoft. Web. UI .Control s" 
assembly="Mi crosof t. Web. Atlas" tagPrefix="atlas"/> 

</control s> 
</pages> 

Les fichiers .asmx sont associes a un nouvel handler (un gestionnaire de 
requetes) afin que les serveurs proxy JavaScript puissent fonctionner. 
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<httpHandlers> 

<remove verb="*" path="*.asmx"/> 

<add verb="*" path="*.asmx" 

type="Mi crosof t . Web . Servi ces . Scri ptHandl erFactory " 
val idate="fal se"/> 

odd verb="*" path="atlasbatchcall .axd" 

type="Mi crosof t . Web . Servi ces . Mul ti RequestHandl er" 
val idate=" fal se"/> 

odd verb="*" path="atlasglob.axd" 
type="Mi crosof t . Web . Gl obal i zati on . Gl obal i zati onHandl er" 
val idate=" fal se"/> 

odd verb="*" path="*.asbx" 

type="Mi crosof t . Web . Servi ces . Scri ptHandl erFactory" 
val idate=" fal se"/> 

</httpHandlers> 



Des modules de service sont ajoutes. 

<httpModul es> 

odd name="ScriptModule" 
type="Mi crosof t . Web . Servi ces . Scri ptModul e"/> 

odd name="BridgeModule" 
type="Mi crosof t . Web . Servi ces . Bri dgeModul e"/> 

odd name="WebResourceCompression" type= 
"Mi crosof t .Web . Servi ces . WebResourceCompressi onModul e"/> 
</httpModules> 



Ajout des controles Atlas a la boite a outils 

Pour utiliser facilement les controles Atlas dans votre site, vous allez les ajouter 
a la boite a outils de Visual Studio. 

1 Ajouter un ongiet | Selectionnez la commande Ajouter un onglet 

de la boite a outils. 



2 Nommez cet onglet Atlas. 1 p At|M | i Figure 21-7 : 

1 Creation de I'onglet Atlas 



3 || choisirieseiemtnts... | Selectionnez la commande Choisir les ele- 

ments de I'onglet que vous venez de creer. 

La fenetre qui s'ouvre affiche 1' ensemble des controles disponibles. Ceux 
accompagnes d'une case a cocher selectionnee sont deja ajoutes a un 
onglet de la boite a outils. 

Cliquez sur le bouton Parcourir puis recherchez 1' emplacement 
C:\Program Files\Microsoft ASP.NET\Atlas\v2.0.50727\Atlas pour 
selectionner 1' assembly qui contient les controles Atlas que vous voulez 
avoir a disposition. 
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Regarder dans : 



0 



Mes Projets 
Poste de travail 



Ir^ScriptLibrarv 



\~d Atlas 



Norn de fidhier : 



lypes de fichiers : Executables (».dll; ».exe) 



▲ Figure 21-8 : Selection de rassemblyMicrosoft.Web.Atlas.dll 

4 La fenetre selectionne les nouveaux controles contenus dans cet assembly 
et les coche pour ajouter leurs references dans la boite a outils. Cliquez sur 
OK. 



Choisir des elements de boite a outils 



Composants .NET Framework I Composants COM 



No 


■ 


Espace de noms 


Nom de I'assembly 




□ TransactonScope 


System . Workflow . Componen tM . . 


System , Workflow , Componen tMod . . . 




0 TreeView 


System . Windows . Forms 


System, Windows, Forms (2.0.0.0) 




0 TreeView 


System , Windows . Forms 


System, Windows, Forms (1.0.5000.0) 




0 TreeView 


System , Windows . Forms 


System, Windows, Forms (2.0.0.0) 




0 TreeView 


System , Web . UI . WebCon trols 


System. Web (2.0.0.0) 




I I TreeViewArray 


Microsoft.VisualBasic.Compatibi. . 


Microsoft. VisualBasic. Compatibility . . . 




0 


UpdatePanel 


Microsoft. Web.UI 


Microsoft. Web.AUas (2.0.50727.0) 




0 


UpdateProgress 


Microsoft. Web.UI 


Microsoft. Web.AUas (2.0.50727.0) 




0 UserControl 


System . Windows . Forms 


System. Windows. Forms (2.0.0.0) 


V 


< 






II >> 



FJtre: | 

AuthenocabonWebService 

Langue: Langue indifferente (Pays indifferent) 

J 

Version : 2.0. 50727.0 (Version commerdale) 



OK | Annuler | | ReinitialiseT" 



▲ Figure 21-9 : Importation des controles serveurs Atlas 
5 Les controles Atlas sont alors ajoutes a l'onglet. 
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- Atlas 

^ Pointeur 

£91 AutoCompleteExtender 
s *Sf DragOverlayExtender 
0 Gadget 
S$ InitalData 
„j' ProfileScnptService 

ScriptManager 
^ ScrlptManagerProxy 
■iji TimerControl 
^ UpdatePanel 

UpdateProgress 
0 WebPartManager 
ffi WebPartZone 



< Figure 21-10 : Liste des 
controles Atlas 



Avant d'utiliser le Framework Atlas dans des pages web, voyons les differentes 
syntaxes du code Atlas. 



21 .4 Syntaxe du code Atlas 

II existe trois facons d'ecrire du code Atlas. 

Mode imperatif 

Le code imperatif n'est ni plus ni moins que l'utilisation du Framework 
JavaScript Atlas dans vos pages. Cette methodologie necessite une connais- 
sance avancee du langage JavaScript et des differents elements du Framework 
Atlas. Ce mode d'utilisation est cependant necessaire au developpement de 
controles serveurs Atlas. 

<input id="button" type="button" oncl ick="GetVal ues" /> 
<script type="text/javascript" 

src="WebServiceAtlas.asmx/js"x/script> 
<script type="text/javascript"> 
function GetValuesQ { 

WebServi ceAtl as . getVal ues (GetVal ues_Cal l Back) ; 

} 

function GetVal ues_Cal I Back(resul t) { 

II- 
) 

</script> 



Mode declaratif 

Le mode declaratif consiste a ajouter une balise de type "text/xml -script" 
permettant la description du comportement de votre page. Ce mode de travail 
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par description est certainement le plus comprehensible pour quelqu'un debu- 
tant avec Atlas. II permet la mise en place de comportement cote client au sein 
d'une page de facon simple et rapide. 

<input id="button" type=" button" value="0K" /> 

<scri pt type="text/xml -scri pt "> 

<page...> 

<dataSource id="dataSource" 

servi ceURL="WebServi ceAtl as . asmx" /> 
<button id="buttonAction" targetElement="button"> 
<cl ick> 

<invokeMethod target="dataSource" method="GetValues" /> 

//... 

</click> 
</button> 
</page> 
</script> 



Mode serveur 

Les controles serveurs disponibles dans le Framework Atlas sont pour la plupart 
des extenders, c'est-a-dire des controles qui vont etendre le comportement de 
controles deja existants. Par exemple, AutoCompl eteExtender, dont vous verrez 
un exemple d'utilisation plus loin dans ce chapitre, permet la mise en place 
d'une zone de saisie qui propose a l'utilisateur de completer sa frappe par le 
biais de suggestions, au fur et a mesure de la saisie. II etend le comportement 
d'une TextBox en passant par une methode de Web Service pour recuperer les 
suggestions en fonction de ce qui est deja saisi. 

<asp:TextBox ID="TextBoxl" runat="server" /> 
<atl as : AutoCompl eteExtender ID="AutoCompl ete" 
runat="server"> 

<atl as: AutoCompl eteProperties TargetControl ID="TextBoxl" 
Enabled="true" Servi cePath="WebService. asmx" 
ServiceMethod="GetValues" /> 
</atl as : AutoCompl eteExtender> 



21.5 Utilisation du controle UpdatePanel 

Le controle UpdatePanel indique quelles sections de la page doivent etre mises 
a jour independamment. Lorsqu'un evenement qui doit normalement declen- 
cher une publication est lance, cette publication est en realite executee de 
maniere asynchrone. 
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Le controle UpdatePanel peut contenir des elements Triggers ainsi qu'un 
ContentTemplate : 

<atlas:UpdatePanel ID="UpdatePanell" runat="server"> 
<Triggers> 

</Triggers> 
<ContentTemplate> 

</ContentTempl ate> 
</atl as: UpdatePanel > 

Le code declaratif a l'interieur du ContentTemplate est rafraichi lorsque le 
Scri ptManager gere une publication asynchrone. Les triggers declarent quant a 
eux les evenements et les proprietes que 1' UpdatePanel doit gerer grace aux 
elements Control ValueTrigger et Control EventTrigger. 

Horloge 

Vous allez maintenant realiser une horloge en utilisant le controle UpdatePanel . 
II s'agit d'un exemple typique propose a ceux qui debutent en programmation 
JavaScript. Vous aurez ainsi 1' occasion de constater a quel point il est facile de 
realiser ce genre de fonctionnalite a l'aide de controle Atlas. 

Vous allez utiliser pour cela le controle Atlas TimerControl , qui est une sorte de 
compteur a rebours. II possede une propriete Interval qui specifie un intervalle 
de temps en millisecondes et un evenement Tick qui se produit apres chaque 
intervalle. 

1 Pour commencer, deposez un controle UpdatePanel dans votre page a 
partir de la boite a outils Atlas que vous avez creee precedemment. 



^arque 



Importation d'assembly lors du depot d'un controle 

Si vous etiez parti d'un site web normal, le depot du controle UpdatePanel aurait 
eu pour effet d'importer directement I'assembly Microsoft.Web.Atlas.dll puisqu'i 
est necessaire a son fonctionnement et qu'ils ont ete associes au moment de 
I'ajout dans la boite a outils. 



2 Affichez le smart tag puis cliquez sur le lien Add Script Manager pour 
ajouter un controle Scri ptManager. 
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M ar 

TJ pdatePanel - UpdatePanel 1 




Tacties UpdatePanel 

Add Script Manaaer 







A Figure 21-11 : Smart tag du 
controle ScriptManager 

3 Al'interieur de la balise ContentTempl ate de l'UpdatePanel, inserez le 
code serveur qui affiche l'heure courante au format hh:mm:ss. 

<ContentTemplate> 

<%=DateTi me . Now . ToLongTi meSt ri ng ( ) %> 
</ContentTempl ate> 

4 Activez ensuite la propriete EnablePartial Rendering du controle Script- 
Manager. 





Taches ScriptManager 


; ScriptManager - ScriptManager 1 


0 Enable Partial Rendering 
Create Error Template 


|%utton | 




UpdatePanel - UpdatePanel 1 


Modifier les modeles 


r i 







< Figure 21-12 : Activation de la 
propriete EnablePartialRendering d'un 
controle ScriptManager 



Deposez un controle TimerControl dans la page, en dehors de l'Update- 
Panel et specifiez un intervalle de 1 000 millisecondes, soit 1 seconde, 
dans sa propriete Interval. 

En mode Design, selectionnez l'UpdatePanel puis cliquez sur le bouton de 
la propriete Triggers pour ouvrir la boite de dialogue qui gere les 
declencheurs. 



Triggers 



(Collection) 



Configure Update Triggers 



Triggers enable you to configure partial rendering by determining when the UpdatePanel is 
updated. 



New Trigger. . 



Delete Trigger 



▲ Figure 21-13 : BoTte de dialogue de gestion des declencheurs 

7 Un bouton New Trigger ouvre une nouvelle boTte de dialogue qui permet 
d'ajouter facilement un declencheur. Selectionnez d'abord le type de 
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declencheur. Vous pouvez le baser sur le changement d'une propriete ou 
sur le declenchement d'un evenement d'un controle situe en dehors de 
1'UpdatePanel . 

8 Ajoutez un trigger qui gere 1'evenement Ti ck du controle Timer. Pour cela, 
vous disposez de deux liens situes a l'interieur d'une phrase qui permet de 
comprendre quel type de trigger va etre ajoute. 



Le premier propose les controles possibles 



Create New Trigger 



What type of trigger do you want to create? 
Trigger when a control's property changes. 



Trigger when a control raises an event. 



When should the trigger cause the UpdatePanel to update? 



Trigger when <control> raises its --event > event 
Page 

Content 1 

ScriptManager 




A Figure 21-14 : Controles disponibles pour le trigger 
Le second propose les evenements associes au controle selectionne : 



Create New Trigger 



What type of trigger do you want to create? 
Trigger when a control's property changes, 



Trigger '/■.'hen a control raises an event. 



When should the trigger cause the UpdatePanel to update? 



Trigger when Timer raises its <event> event. 












More Events 


► | — 




I 


OK 


| Cancel 



▲ Figure 21-15 : Evenements associes au controle selectionne 

Cela a pour effet d'ajouter un trigger qui gere 1'evenement Tick du Timer dans 
la collection des triggers de 1' UpdatePanel . 

Au final, voici le code que vous obtenez : 
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<atlas:Scn'ptManager ID="ScriptManager" runat="server" 

EnablePartial Renderi ng="true" /> 
<atlas:UpdatePanel ID="UpdatePanel " runat="server"> 
<ContentTempl ate> 

<%=DateTi me . Now . ToLongTi meSt ri ng () %> 
</ContentTempl ate> 
<Triggers> 

<atl as: Control EventTrigger Control ID="Timer" 
EventName="Tick" /> 
</Triggers> 
</atlas:UpdatePanel> 

<atlas:TimerControl ID="Timer" runat="server" 
Enabled="tnie" Interval ="1000" /> 

L'affichage de la page web permet de voir . . -4 Figure 21-16 : 

que l'heure se met bien a jour toutes les l 17:12:09 l Affichage de I'heure 
secondes. 

21.6 Utilisation du controle 
AutoCompleteExtender 

Passez ensuite a la creation de la Text Box avec suggestions automatiques en 
fonction de la saisie. 

1 Ajoutez tout d'abord un controle ScriptManager et le controle TexBox qui 
va recuperer la saisie de l'utilisateur. 

2 Declarez ensuite un controle AutoCompleteExtender. Precisez qu'il s'ap- 
plique a la TextBox et qu'il utilise la methode GetContacts du service web 
GetContacts.asmx. 

Votre code doit ressembler a ceci : 

<atl as : Scri ptManager ID="Scri ptManagerl " 
EnablePartial Renderi ng="true" runat="server" /> 

Nom : 

<asp:TextBox ID="tbName" runat="server" /> 

<atl as: AutoCompleteExtender ID="acl" runat="server"> 
<atl as : AutoCompl eteProperti es Enabl ed="true" 
Mi nimumPref i xLength=" 1" 

ServicePath="GetContacts.asmx" TargetControl ID="tbName" 
k» ServiceMethod="GetContacts" /> 
</atl as : AutoCompl eteExtender> 
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^ Specification du nombre minimum de lettres a saisir 

La methode GetContacts du service web sera appelee a chaque lettre saisie 
dans le controle TextBox des que le nombre de lettres a atteint la limite fixee 
dans la propriete MinimumPrefixLength de I'AutoCompleteExtender. 



sie 
ee 



II ne reste plus qu'a creer le service web et sa methode GetContacts. 

Creation du service web 

1 Ajoutez un nouvel element GetContacts.asmx de type service web a la 
racine de votre prqjet. 



Ajouter un nouvel element - http;//localhost/CPE/AutoComplete/ 



Modeles Visual Studio installes 

"~| Web Form 
Q Page HTML 
A| Feuille de style 
_^Fichier XML 

Fichier de ressources 
^ Gestionnaire generique 
-y ,N Web Form Mobile 
^JFichier JScript 
j^- Fichier d'apparence 

Mes modeles 



J Page maitre 



^] Classe d'application globale 
iLj Schema XML 
| J Base de donnees SQL 
"J Plan de site 
H Rapport 



$: Controle utilisateur Web 
v _e] Classe 

Fichier de configuration Web 

Fichier texte 

DaraSer 
4|J Fichier VBScript 

Controle utilisateur Web Mobile 



^ Fichier de configuration Web Mobile jj? Fichier X5LT 
i_J Fichier browser Sk Diagramme de classes 



zj Rechercher des modeles en ligne , , 



map 



Classe concue de maniere graphique pour la creation d'un service Web 
Nom : 



GetContacts.asmx 



Langage : 



v 0 Placer le code dans un fichier distinct 

[_l Selettionner la page maitre 



Ajouter 



▲ Figure 21-17 : Ajoutd'un service web 

2 Le code de ce service web se trouvera dans le dossier AppjCode. 
Ajoutez-lui une methode GetContacts au format suivant : 

<WebMethod()> _ 

Public Function GetContacts (ByVal prefixText As String, 

ByVal count As String) As String () 
End Function 



334 • Le guide du codeur 



Utilisation du controle AutoCompleteExtender 




^arque 

Syntaxe de la methode de recuperation des suggestions 

La methode du service web de recuperation des suggestions doit etre exacte 
ment celle-ci, avec les memes noms de parametre. 



te^ 



3 En ce qui concerne le code de recuperation des noms qui correspondent 
aux lettres deja saisies, vous pouvez utiliser une liste generique d'objets 
String, par exemple la liste de vos contacts, et un predicat qui verifie si le 
debut de la chaine correspond au parametre prefixText. Dans cet exemple, 
declarez une liste manuellement : 

Dim 1 As New List (Of String) 
Dim names As String () = 

{"Adeline", "Antoine", "Aurelien", "Gregory",...} 
1 .AddRange(names) 

4 Creez ensuite une classe qui prend en parametre de constructeur le prefixe 
a verifier et declarez une methode IsBegi nni ngOf qui verifie si une chaine 
passee en parametre commence par ce prefixe : 

Public Class StringFilter 

Private strPrefix As String = "" 

Public Sub New(ByVal value As String) 

strPrefix = value 
End Sub 

Public Function IsBegi nni ngOf(ByVal _name As String) 
As Boolean 

Return _name.StartsWith (strPrefix, 
Stri ngCompari son . I nvari antCul turelgnoreCase) 
End Function 



End Class 



5 Vous pouvez ensuite utiliser la fonction FindAll d'une liste generique qui 
prend en parametre un predicat. En lui passant un predicat qui verifie si 
une chaine commence par le prefixe, vous obtiendrez done seulement les 
contacts qui commencent par les lettres saisies. Utilisez alors la methode 
ToArray pour renvoyer un tableau de String. 

Dim p As System. Predicate(Of String) = 
New Predicate(Of String) (AddressOf _ 
New StringFilter(prefixText) .IsBeginningOf) 
Return 1 .FindAll (p) .ToArray () 
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E Vous pouvez tester votre zone de saisie en entrant quelques lettres. Une 
liste de tous les contacts correspondants s'affichera alors. 







Nom : 


a 


Adeline 
Antoine 
Aurelien 



■< Figure 21-18 : Suggestion des 
contacts commencant par la 
lettre "a" 



21.7 Check-list 

Dans ce chapitre, vous avez appris a : 

■ installer Atlas ; 

■ ajouter des controles Atlas a la boite a outils ; 

■ utiliser le controle UpdatePanel ; 

■ utiliser le controle AutoCompl eteExtender. 
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Realisation d'un questionnaire a I'aide d'un contrdle Wizard 



Lorsque vous realisez une application, votre souci principal doit etre de 
repondre aux besoins de l'utilisateur en lui fournissant des fonctionnalites les 
plus simples possibles. On parle dans ce cas d'experience utilisateur. 

Si vous devez afficher une quantite importante de donnees sur un meme ecran, 
cela peut vite devenir assez incomprehensible pour l'utilisateur. Afin de 
l'assister dans la saisie d'informations, il est interessant de decomposer une 
operation compliquee en plusieurs etapes simples et detaillees. 

De nombreuses fonctionnalites necessitent d'etre decomposees en plusieurs 
etapes, que ce soit pour des raisons de decomposition logique (si Ton doit 
proceder a une etape avant une autre par exemple) ou d'organisation. 

Dans cet exemple, vous allez developper un questionnaire a I'aide du controle 
Wizard. Vous aurez par ce biais l'occasion d'apprendre a ameliorer la saisie de 
formulaire pour une meilleure experience utilisateur. 

22.1 Classes et espaces de noms 
utilises 

L'espace de noms System. Web. UI .WebControl s s'est considerablement enrichi 
avec l'ASP .NET 2.0. De nombreux nouveaux controles sont en effet disponi- 
bles et l' architecture a ete repensee et reorganised afin de fournir par exemple 
des classes de base dont peuvent heriter d'autres controles enfants ou des 
interfaces a implementer pour ajouter des fonctionnalites interessantes. 

CompositeControl, dont herite le controle Wizard, est une classe abstraite qui 
sert a developper des controles personnalises englobant des controles enfants ou 
utilisant les fonctionnalites d'autres controles, tels que les controles Login ou 
SiteMapPath. 



22.2 Contrdle Wizard 

Le Framework ASP .NET l.l ne disposait pas de controle permettant de 
recolter des informations en plusieurs etapes. Le souci majeur etait notamment 
la persistance des donnees ainsi qu'une navigation intuitive. II s'agissait de 
fournir un controle simple a configurer et qui autorisait en meme temps une 
personnalisation totale de chaque element ainsi qu'un ensemble d'evenements 
permettant de gerer les enchainements d'ecrans et la recuperation des valeurs 
saisies. Le nouveau controle serveur Wizard repond a la plupart de ces 
problematiques. 

Le controle Wizard fournit une navigation au travers d'une serie d'etapes qui 
recuperent l'information de l'utilisateur final. 
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Le controle Wizard peut etre constitue des elements suivants : 

■ une collection d'etapes (Wizard Steps) qui contient l'interface utilisateur 
pour chacune d'entre elles, comme defini par le developpeur de pages ; 

■ une zone de navigation (Navigation Area) integree qui determine les 
boutons appropries a afficher en fonction de l'etape a laquelle le Wizard se 
trouve ; 

■ un en-tete (Header) qui peut etre personnalise pour afficher des informa- 
tions specifiques a l'etape ou l'utilisateur se trouve. 

■ une barre laterale (Side Bar) qui peut etre utilisee pour naviguer rapide- 
ment a travers les differentes etapes du controle. 

Wizard Steps 

L'element enfant le plus important est bien sur la collection des etapes. Chaque 
etape dans le controle Wizard a une propriete StepType qui determine le type de 
fonctionnalite de navigation qu'offre l'etape. Si vous ne specifiez pas de valeur 
pour la propriete StepType, la valeur par defaut est Auto. 

Le tableau suivant repertorie les differentes valeurs possibles de la propriete 
StepType : 



Differentes valeurs disponibles pour I'enumeration WizardStepType 


Type d'etape 


Description 


Wi zardStepType . Start 


11 s'agit de la premiere etape. Le bouton 
Precedent n'est done pas affiche. 


Wi zardStepType . Step 


Une etape standard situee entre la premiere et la 
derniere. Les boutons Precedent et Suivant 
permettent de naviguer entre les etapes. 


Wi zardStepType . Auto 


Le type de cette etape est determine selon l'ordre 
dans lequel l'etape est declaree dans le code de la 
page. 


Wi zardStepType .Finish 


C'est la derniere etape de saisie ou Ton peut 
recuperer les donnees de l'utilisateur. Le bouton 
Terminer apparaTt. 


Wi zardStepType . Compl ete 


C'est la toute derniere etape. Aucun bouton n'est 
present. Vous pouvez vous en servir pour afficher 
un resume des etapes par exemple. 
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Types d'etapes automatiques 

Si vous utilisez des etapes de type Auto, la premiere sera consideree comme 
une etape de demarrage (Start Step) et la derniere comme une etape de fin 
[Finish Step]. Pour ajouter une etape de type Complete, vous devez la declarer 
explicitement. 



22.3 Realisation du questionnaire 

Passons maintenant a la realisation du questionnaire. Tout d'abord, vous allez 
selectionner un controle Wizard dans la boite a outils et le deposer dans la page. 



Wizard 



Wizard 

Version 2.0.0.0 de Microsoft Corporation 
.NET Component 



Figure 22-1 : Controle Wizard 
dans la boite a outils de Visual Studio 



Par defaut, le Wizard contient deux etapes standard vides, ce qui permet d'avoir 
un premier apercu : 



<asp:Wizard ID="Wizardl" Runat="server 


'> 


<WizardSteps> 




<asp : Wi zardStep Runat=" server" 


Title="Step 1"> 


</asp:WizardStep> 




<asp:WizardStep Runat="server" 


Title="Step 2"> 


</asp:WizardStep> 




</WizardSteps> 




</asp:Wizard> 





Ajout des etapes 

Le smart tag s'affiche avec les differentes options de configuration possibles. 



DefaulLaspx 








,LtJ Li 


Taches Wizard 




Step l 

Step 2 . . 


Mise en forme automarjque. . . 




Etape: |stepl v 




Suivant 


AjoutEr/Supprimer WizardSteps... 






Conver tir en StartNavrgationTemplate 




Converrjr en StepNavrgatkxiTemplate 




Converrjr en RrwshNa wga rxxiTerrtplate 




Converrjr en SideBarTempiate 




Modifier \es modeles 



Figure 22-2 : 

Smart tag d'un 
controle Wizard 
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Une liste permet notamment de selectionner l'etape que vous voulez modifier 
et des liens d'action permettent de changer facilement le type de l'etape en 
cours d' edition. 



Mise en forme automatjque. . 
Etape : 

Etape 1 
Convert] Etape 2 



Converti 
Convert] 



Etape 3 
Termine 
Complete 



Figure 22-3 : Navigation entre les 
etapes grace a une liste du smart tag 



Un lien d'action permet tout d'abord d'ajouter et de supprimer facilement des 
etapes a l'aide d'un editeur. Vous pouvez ainsi definir les etapes, les organiser 
et modifier leurs proprietes comme leur identifiant, leur titre ou encore leur 
type. 



Editeur de collections Wizards 



Etape : 
Etape 2 
Etape 3 
Termine 
Complete 



a 
s 



Proprietes Demarrage : 

□ Apparence 

Title Demarrage 

□ Comportement 

AllowReturn True 
EnableTheming 



Ajouter 



Supprimer 




StepType 



▲ Figure 22-4 : Editeur de collections WizardStep 

II suffit de cliquer sur l'etape pour pouvoir editer son contenu. Vous pouvez 
alors ecrire du texte ou meme deposer n'importe quel controle a partir de la 
boite a outils. 

Vous pouvez ainsi obtenir rapidement une etape qui ressemble a celle-ci dans 
Visual Studio : 
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DefaurLaspx 



J Quesbon : 

IB 

Reponse 1 
O Reponse 2 
O Reponse 3 



rti 



Sauter Is prochaine etape 



| Precedent | | Suivant~| 



▲ Figure 22-5 : Etape 1 du Wizard dans I'editeur en mode Design 

Au final, le questionnaire ressemblera a ce vous pouvez visualiser en mode 
Design. 



Demarraae 
Etape 1 

Etape 2 
Etape 3 
Termine 



Complete 




Question : 

Reponse 1 
O Reponse 2 
O Reponse 3 

Sauter la prochaine etape 

| Precede 



▲ Figure 22-6 : Etape 1 du questionnaire 

Mise en forme du Wizard 

Afin de mettre en forme le questionnaire avec un style par defaut, vous pouvez 
selectionner une mise en forme automatique a I'aide d'un Assistant qui affiche 
certaines apparences possibles et qui definit les proprietes de style du controle 
Wizard. 



Mise en forme automatique 



Selectionner un schema : 
Supprimer la mise en forme 
Couleur 
Professionnel 



Simple 



Apergu : 



Step 




Step 


jjj Suivant 





Annuler I AppHquer 



▲ Figure 22-7 : Assistant de mise en forme automatique 
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Le controle Wizard possede plusieurs proprietes de style correspondant a 
chacun de ces composants. 



B Styles 


0 


CancelButtonStyle 




0 


FinishCompieteButtonStyle 




0 


FinishPreviousButtonStyle 




0 


Headers tyle 




0 


NavigationButtonStyle 




0 


Navigations tyle 




0 


SideBarButtonStyle 






BackColor 


_ #507CD1 




BorderColor 


□ 




Borders tyle 


NotSet 




BorderWidth 






CssClass 






ffl Font 


Verdana 




ForeColor 


1 1 White 




Height 






Width 




0 


SideBarStyle 




s 


StartNextButtonStyle 




0 


StepNextButtonStyle 




s 


StepPreviousButtonStyle 




0 


StepStyle 



Figure 22-8 : 

Proprietes de style du 
controle Wizard 



Le fait de selectionner un style predefini a l'aide de 1' Assistant de mise en 
forme automatique determine ces proprietes de style. Un controle Wizard vide 
auquel est associe le style classique ressemblerait ainsi a ceci : 

<asp:Wizard ID="Wizardl" runat="server" 

ActiveStepIndex="0" Height="400px" Width="600px" 
BackColor="#EFF3FB" BorderColor="#B5C7DE" 
BorderWidth="lpx" Font-Names="Verdana" 
Font-Size="0.8em"> 

<StepStyle Font-Size="0.8em" ForeColor="#333333" /> 
<SideBarStyle BackColor="#507CDl" Font-Size="0.9em" 

VerticalAlign="Top" /> 
<Navi gationButtonStyl e BackCol or="Whi te" 

BorderColor="#507CDl" BorderStyle="Sol id" 

BorderWidth="lpx" Font-Names=" Verdana" 

Font-Size="0.8em" ForeColor="#284E98" /> 
<Si deBarButtonStyl e BackCol or="#507CDl" 

Font-Names="Verdana" ForeColor="White" /> 
<HeaderStyle BackCol or="#284E98" BorderColor="#EFF3FB" 

BorderStyle="Solid" BorderWidth="2px" 

Font-Bold="True" Font-Si ze="0.9em" 

ForeColor="White" HorizontalAl ign="Center" /> 
</asp:Wizard> 
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Etant donne le nombre important de proprietes de style et de leurs attributs, cela 
peut vite devenir complexe et difficile a maintenir. II est done conseille de 
declarer ces proprietes dans un fichier d'apparence (.skin). 



Lisez a ce sujet le chapitre Site web avec selecteur de themes. 



Renvoi 



Vous pourrez ainsi appliquer facilement la meme apparence a tous vos controles 
Wizard ou en creer d'autres. 



Personnalisation du Wizard 

Le controle Wizard contient certains elements configurables comme le Header- 
Tempi ate. Ce modele est l'endroit dans lequel vous pouvez specifier ce qui va 
etre affiche dans l'en-tete du Wizard. D'autres modeles, comme le StartNavi- 
gationTemplate, le StepNavigationTemplate ou le FinishNavigationTemplate, 
permettent de personnaliser l'apparence des differentes etapes. 

Vous pouvez editer ces modeles en mode Design a I'aide de la balise active et 
d'une liste qui affiche les differents templates et permet de basculer entre eux. 



Default^ispx 



m 

Wis 



izard 1 - HeaderTemplate 



® Taches Wizard 



HeaderTemplate 



Mode de modification de modele 
Afficher : 
Terminer la modification du modele 



HeaderTemplate 



▲ Figure 22-9 : Edition du HeaderTemplate 

Certains sont predefinis et doivent repondre a une structure precise si vous 
voulez les redefinir. II en est ainsi du SideBarTemplate, charge d'afficher les 
differentes etapes dans une zone laterale et de distinguer l'etape en cours. 

Une autre fonctionnalite interessante est la possibilite de modifier la taille du 
controle a I'aide des poignees de redimensionnement prevues a cet effet, 
comme vous le feriez pour un formulaire Windows. 



Default-aspx* 



13 



Step 1 

Step 2 



200px,90px 



Suivant 



< Figure 22-10 : 

Redimensionnement du controle 
Wizard 
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22.4 Navigation au sein du controle 
Wizard 

Le controle Wizard etant essentiellement destine a afficher des etapes succes- 
sives, de nombreuses methodes, evenements et proprietes peuvent vous aider a 
personnaliser la navigation et renchainement des etapes. 

Navigation lineaire 

Si vous souhaitez enregistrer les informations saisies a chaque etape, sans 
laisser la possibilite de revenir en arriere, vous devez affecter la valeur f al se 
a la propriete Al lowReturn de l'etape. Vous pouvez alors utiliser le gestionnaire 
d'evenements NextButtonCl i ck afin de realiser Taction en fonction de l'etape 
qu'il vient de valider. 

Si vous voulez passer une etape, selon ce que l'utilisateur a saisi, vous pouvez 
utiliser la methode MoveTo ou la propriete Acti veStepIndex afin de modifier 
dynamiquement l'etape suivante dans la navigation. 

Navigation personnalisee 

S'il faut sauter des etapes selon les choix de l'utilisateur ou les informations 
saisies, vous pouvez effectuer ce genre de navigation personnalisee a l'aide 
d'un gestionnaire d'evenements de l'evenement NextButtonCl ick a l'interieur 
duquel vous testerez si les conditions sont remplies pour passer une etape et 
indiquerez ensuite l'index de l'etape suivante a atteindre. 

Voici par exemple un gestionnaire d'evenements qui teste a la fin de l'etape 1 
si une case a cocher a ete selectionnee et passe a l'etape 3 si c'est le cas. 

Protected Sub Questionnaire_NextButtonCl ick( 
ByVal sender As Object, 
ByVal e As System. Web. UI .WebControl s. 
WizardNavigationEventArgs)_ 
Handl es Questi onnai re . NextButtonCl i ck 

If Questionnaire. ActiveStepIndex = 1 Then 
If cbSkipStep. Checked Then 

Questionnaire. ActiveStepIndex = 3 

Else 

Questionnaire. ActiveStepIndex = 2 
End If 
End If 
End Sub 
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Recapitulatif des resultats 

Apres avoir cree plusieurs etapes, vous pouvez ecrire un peu de code pour 
afficher les choix de l'utilisateur : 

<asp:WizardStep runat="server" StepType="Finish" 
Title="Termine" ID="Finish"> 

Void un recapitulatif :<br /xbr /> 

<b>Question l</b> : 

<%=Reponsel.SelectedItem.Text%xbr /> 

<b>Question 2</b> : 

<%=Reponse2 . Sel ected I tern . Text%xbr /> 

<b>Question 3</b> : <%=Reponse3.Text%> 
</asp:WizardStep> 



Etape 1 
Etape 2 
Etape 3 
Termine 
Complete 



uestionnaire 




| I 



▲ Figure 22-11 : Ecran recapitulatif des resultats de letape Finish 



22.5 Amelioration de ('experience 
utilisateur 

Souvent, les developpeurs mettent de cote l'experience utilisateur, en se 
souciant peu de fournir un outil adapte a ceux qui vont se servir de leurs 
applications. A leurs yeux, cette etape importante d' amelioration de l'expe- 
rience utilisateur n'est pas prioritaire, au point d'en etre parfois occultee. Les 
developpeurs ont, en effet, parfois du mal a se mettre a la place des utilisateurs 
et ce qui parait evident aux premiers ne Test pas forcement pour les seconds. 

Vous allez maintenant decouvrir quelques astuces simples et bien utiles pour 
ameliorer la saisie de formulaires web. II s'agit de nouvelles fonctionnalites 
associees aux controles et aux pages ASP .NET qui apparaissent avec le 
Framework 2.0. 

Toutes ces proprietes n'etaient pas forcement presentes dans le Framework 1.1 
et le retour d'experience des developpeurs a fait qu'elles ont ete integrees dans 
la nouvelle version et surtout qu'elles ont ete pensees afin d'etre facilement 
configurables. 
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Vous n'aurez ainsi plus d' excuses pour ne pas fournir des interfaces "user 
friendly". Voici a present les differents domaines que vous devez integrer afin 
de developper des formulaires qui permettent de saisir rapidement de 1' infor- 
mation et de guider l'utilisateur pas a pas. 

Controles de validation 

- validation^ Les developpeurs sont souvent amenes a valider une donnee 
saisie par l'utilisateur avant de l'enregistrer ou de declencher une action. Les 
controles de validation, autrement appeles "validateurs", fournissent un moyen 
simple et efficace de verifier la validite d'une entree et, si necessaire, de 
renvoyer des messages d'erreur explicites. 

Certaines proprietes sont communes aux differents types de validateurs : 



Proprieties communes aux controles validateurs 


Propriete 


Description 


ControlToVal idate 


L'identifiant du controle a valider. 


Val idationGroup 


Le groupe de validation associe. Si vous avez des 
zones differentes a verifier, cela permet de separer 
leur validation. 


Text 


Le texte a afEcher a l'endroit ou le validateur est 
insere. Par exemple, le caractere "*" pour une donnee 
obligatoire. 


ErrorMessage 


Un message plus detaille qui apparait dans le resume 
des erreurs rencontrees. 



La validation des champs d'un formulaire intervient lorsque l'utilisateur 
declenche un evenement dont le controle associe possede une propriete 
CausesVal idation avec la valeur true et qui est relie au groupe de validation. 

Voici quelques exemples de controles de validation souvent utilises pour 
verifier la saisie de l'utilisateur et afficher des messages d'erreur le cas echeant. 



RequiredFieldValidator 

| -y RequiredReidvaiidator | Le controle RequiredFieldValidator permet de verifier 
qu'une zone de saisie a bien ete remplie et ainsi de rendre cette donnee 
obligatoire : 

<asp:RequiredFieldVal idator id="rfv Email " runat="server" 
Control ToVal i date=" Emai 1 " 

ErrorMessage="Le champ 'E-mail' est obligatoire. ">* 
</asp : Reqm redFi el dVal i dator> 
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RegularExpressionValidator 

g ReguiarExpressionvaiidator| Le controle Regul arExpressi onVal i dator sert a controler 
le format d'une donnee. Vous pouvez ainsi verifier qu'une adresse e-mail a bien 
ete saisie sous la forme nom@domaine.ext : 

<asp: Regul arExpressi onVal i dator ID="revEmail " 
runat=" server" ControlToVal idate="Email " 
ErrorMessage="Le champ 'E-mail' n'a pas le bon format." 
Val idationExpression= 

" \w+ ( [-+ . ] \w+) *@\w+ ( [- . ] \w+) *\ . \w+ ( [- . ] \w+) * "> ! 

</asp : Regul arExpressi onVal i dator> 

ValidationSummary 

vaiidaeonSummary| Le controle ValidationSummary permet de recuperer l'ensem- 
ble des erreurs survenues et de les afficher dans un resume a un seul endroit. 
Vous allez en inserer un dans la page maitre afin que chaque page de donnees 
puisse s'en servir. De ce fait, vous le configurerez pour que le message soit 
renvoye sous la forme d'un message d'alerte : 

<asp:Val idationSummary ID="vs" runat="server" 
DisplayMode="List" ShowMessageBox="True" ShowSummary="False"> 
</asp:Val idationSummary> 



- Validation 

1^ Pointeur 

v RequiredFieldValidator 
"J RangeValidator 

RegularExpressionValidator 
^ CompareValidator 



Proprietes des controles serveurs relatives 
a Texperience utilisateur 



Certaines proprietes des principaux controles serveurs que vous utilisez regu- 
lierement dans un formulaire peuvent vous aider a ameliorer 1' experience 
utilisateur. En voici quelques exemples avec leur description et les avantages 
que vous pouvez en tirer. 

Bouton par defaut 

La propriete Defaul tButton du formulaire de la page ou d'un controle Panel 
permet de specifier le bouton d' action par defaut, ce qui aura pour effet de 
declencher un clic sur ce bouton lorsque l'utilisateur appuiera sur la touche 




< Figure 22-12 : Qnglet Validation de 
la boite a outils 



[ Entree l - 



348 • Le guide du codeur 



Check-list 



La propriete UseSubmi tBehavi or d'un bouton est equivalente : elle le transforme 
en un bouton de type Submit. 

Focus 

La propriete Defaul tFocus de la page permet d'indiquer l'identifiant du 
controle qui recevra le focus par defaut, c'est-a-dire celui qui sera pret a etre 
saisi. Vous ferez ainsi gagner du temps a l'utilisateur s'il doit regulierement 
intervenir sur des formulaires (ajout rapide, modification...). II prendra en effet 
rapidement l'habitude des etapes par lesquelles il doit passer pour realiser une 
action et le fait de pouvoir saisir des informations sans se servir de la souris est 
appreciable. 

La propriete SetFocusOnError d'un validateur permet, quant a elle, de placer le 
focus sur le controle si une erreur de validation est detectee afm de pouvoir la 
corriger immediatement. 

La page contient egalement une methode SetFocus, qui prend en parametre un 
identifiant de controle. 

Proprieties d'accessibilite 

Deux proprietes appartiennent a la categorie Accessibilite de chaque controle 
serveur web. 



Figure 22-1 3 : Categorie 
Accessibilite d'un controle 

La propriete Access Key permet de specifier une lettre de raccourci. II suffit 
ensuite d'appuyer la combinaison (Ajtj+Lettre de raccourci pour acceder au 
controle. 

La propriete Tablndex sert a indiquer l'ordre de tabulation. Vous pouvez ainsi 
specifier l'ordre dans lequel les controles s'enchainent lors d'un appui sur la 
touche [Tab] en incrementant l'index dans les proprietes Tablndex de chaque 
controle "saisissable" de la page. II est ainsi inutile de suivre l'ordre d'appa- 
rition des controles dans la page. 

22.6 Check-list 

L'utilisateur final doit rester au centre des preoccupations du developpeur. De 
nombreux nouveaux controles et ameliorations permettent de fournir des 
fonctionnalites abouties. 

Le controle serveur Wizard est extremement utile pour decomposer la saisie 
d' informations realisee par l'utilisateur. 



El Accessibilite 




Tablndex 


H N 

0 
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Dans ce chapitre, vous avez decouvert les fonctionnalites suivantes : 

■ la definition des differentes etapes du Wizard ; 

■ la personnalisation du Wizard ; 

■ les proprietes de style ; 

■ la gestion des evenements ; 

■ la recuperation de la saisie de l'utilisateur ; 

■ 1' amelioration de l'experience utilisateur dans la saisie de formulaire. 
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Creation d'un controle serveur personnalise 



Le Framework ASP .NET met a disposition un ensemble complet de controles 
serveurs web dont le but est de faciliter le developpement de pages web. La 
plupart des balises HTML ont en effet leur equivalent en tant que controle 
serveur web. 

Certains autres controles sont destines a encapsuler des fonctionnalites assez 
complexes. Une multitude de nouveaux controles font ainsi leur apparition avec 
la version 2.0 du Framework .NET. Le modele de programmation a egalement 
ete revu. II propose des interfaces et des classes qui permettent de developper 
facilement des controles serveurs personnalises. 

De nouveaux espaces de noms et de nouvelles classes ont par exemple ete crees 
pour separer les differentes fonctionnalites auxquelles on fait appel lors du 
developpement de controles comme le design dans Visual Studio ou encore le 
rendu dans le navigateur. 

Dans ce chapitre, vous allez apprendre a developper un controle serveur 
composite, c'est-a-dire un controle qui en contient d'autres pour en fournir un 
seul un peu plus evolue. Notre exemple sera celui d'un controle qui permet de 
saisir facilement une date. Vous aurez l'occasion de decouvrir en meme temps 
des techniques de programmation assez avancees qui faciliteront au final 
l'utilisation de ce controle par les developpeurs, comme la creation d'un smart 
tag associe ou l'utilisation d'Editeurs de proprietes. 



23.1 Creation de la librairie de controles 

La premiere etape consiste a creer la librairie qui va contenir le controle. Pour 
cela, ajoutez tout d'abord a votre solution un projet de type Bibliotheque de 
controles web que vous appellerez Controls. 



Ajouter un nouve 


au projet 






Types de projets : 




Modeles : 


E2(E§ 



Office 
+ Smart Device 
Base de donnees 
Starter Kits 
i Visual C* 

■ Autres types de projets 



Modeles Visual Studio installes 

,J<b] Applicator! Windows 
Appli ca b on co nsole 

-rs 



3 Projet vide 
Mes modeles 

. Jl Rechercher des modeles en ligne . . , 



j jH Bibliotheque de dasses 
I'ijBibliotneque de controles Windows 
JEO Service Windows 



Projet de creation de controles a utiliser dans des applications Web 



Nam: 

Emplacement : 



| C:\Inetpub\wwwroot\CPE 



v Parcourir., 



▲ Figure 23-1 : Ajout d'un projet Bibliotheque de controles web 
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Vous pouvez ensuite afficher les proprietes de votre librairie a l'aide du 
formulaire My Project. Pour l'ouvrir, vous pouvez soit double-cliquer sur le 
dossier MyProject, soit cliquer dessus du bouton droit puis selectionner la 
commande Ouvrir, soit cliquer du bouton droit sur le projet puis selectionner la 
commande Proprietes. 



■< Figure 23-2 : Commande Ouvrir du 
dossier MyProject 

L'interface se compose de plusieurs onglets qui vous aideront a personnaliser 
la librairie selon vos besoins. Voici un apercu des principaux onglets et des 
options qu'ils permettent de configurer. 



; ] Controls 
j" Ouvrir 



Configuration de la librairie 

Onglet Application 

L'onglet Application permet notamment de gerer le nom de 1' assembly qui sera 
genere ainsi que l'espace de noms racine. 



Controls 














Application 






Configurator! : n/A 


v| Ptate-forme: |n/A v| 








Compiler 






Deboguer 


Nom de I'assembly : 


Espace de noms raane : 




Controls 


Controls 




References 


Type d'application : 


Icone: 




Ressources 


Bibliotheque de dasses 


v| (Icone par defaut) v | 




Parametres 


Objet de demarrage : 




(Aucune) 


v 1 Informations de I'assembly... j 




Signature 


i j Acbver Infrastructure de Tapphcaton 




▲ Figure 23-3 : 


Onglet Application 



Onglet Compiler 

L'onglet Compiler sert a gerer les options de compilation. Deux configurations 
de generation sont disponibles par defaut : 



■ Debug, pour generer I'assembly avec un fichier de debogage (.pdb) 
associe ; 

■ Release, pour une version sans fichier de debogage et done plus perfor- 
mante. 
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Application 
Compiler 



Deboguer 
References 
Ressources 
Parametres 



Configuration : 


(Debug) active 


Plate-forme : (Any CPU) active 


"J 






(Debug) active 








Chemin de sortie 


Debug 




binV3ebug\ 


Toutes les configurations 


Parcounr... 



Options avancees de compilation. , 



Toutes les configurations 
Opbon Explicit : 



On v Off 


v Binary 




v 




Condition 




Notification 




Conversion implidte 






Liaison tardive ; I'appel peut echouer au moment de ('execution 


Aucun 




Type implidte ; objet pris par defaut 


Aucun 




Utiliser une variable avant I'assignation 


Avertissement 




Fonction /opera teur sans valeur de retour 


Averbssement 




Variable locale non utilisee 


Avertissement 




La variable d'instance accede au membre partage 


Avertissement 


V 


Acces recursif a un operateur ou une propriete 


Averbssement 




Blocs catch duphques ou superposes 


Avertissement 







Q Desactiver tous les avertissements 
L Considerer tous les averussements comme des erreurs 
Generer le fichier de documentation XML 



A Figure 23-4 : Onglet Compiler 

Onglet References 

L'onglet References permet de cocher les espaces de noms que vous voulez 
importer par defaut pour ne pas avoir a introduire d'instruction Imports en haut 
de vos pages. 



^arque 

^* Proposition des classes 

Si vous oubliez d'importer un espace de noms qui contient une classe que vous 
voulez utiliser ou que celle-ci est mal orthographiee, I'editeur de code de Visual 
Basic vous proposera automatiquement, a I'aide d'une balise, les classes qui 
peuvent correspondre a celle que vous desirez. 
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Plate-forme ; N/A 



References : 
Norn de la ... 

System -NET 

System. Data .NET 

System. Design .NET 

System.Web .NET 

System. Xml .NET 



Re'ersnoss ir-jiilisees. . . 



Chemins d'accesdes references.. 



Type Vers., . Copie locale Chemin d'acces 



2.0.0.0 False C:\WINDOWS Microsoft. NET\Framework\v 2.0. 50 727\System.dl 

2.0.0.0 False C:\WINDOWSV-1ia-osoft.NETVrameiNork\v 2. 0.50 727\System.Data.dll 

2.0.0.0 False C:\WINDOW5Wicrosoft.NEnFramework\v2.0. 50727\System.Design.dll 

2.0.0.0 False C:\WrNDOWSlMiCTOsoft.NETVtamework\v 2. 0.50 727^ ystem.Web.dll 

2.0.0.0 False C:\WINDOWSWicrosoft.NET\rTameworkV 2. 0.50727\System.Xml.dll 



Meltie a (out la reference Web,. 



0 Mkrosoft.VisuaBasic 
0 System 

0 System. Collections 

[^1 System. Collections. Generic 

p| System. ComponentModel 

0 System . Componen (Model, Design 



▲ Figure 23-5 : Dnglet References 

Vous devez egalement faire reference a l'assembly System.Design.dll pour avoir 
a disposition l'espace de noms System. Web. UI .Design et ses classes associees. 
Pour cela, cliquez sur le bouton Ajouter puis sur la commande Reference. 



[ Ajouter , , 



Reference Web.. 



< Figure 23-6 : Bouton 
Ajouter/Reference 

La meme commande est accessible a partir de l'Explorateur de solutions : 
cliquez du bouton droit sur le projet et selectionnez la commande Ajouter une 
reference. 







a 


Generer 






Regenerer 






Nettoyer 






Add Web Deployment Project. . . 






Dependances du projet. . . 






Ordre de la generation du projet. . . 






Ajouter 




Ajouter une reference. . . 



< Figure 23-7 : 

Commande Ajouter 
une reference 



Une boite de dialogue de selection avec plusieurs onglets vous propose alors les 
assemblys auxquels vous pouvez faire reference. 
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Ajouter une reference 



•NET | COM | Projets | Parcourir | Recent | 



Nom du composant 



System 
System 
System 
System 
System 
System 
System 
System 
System 
System 
System 
System 
System 

< 



DirectoryServices 

Directory Services. Pro to. . 

Drawing 

Drawing, Design 

EnterprtseServices 

Management 

Messaging 

Runtime. Remo ting 

Runtime, Serialization, Fo.. 

Security 

ServiceProcess 

Transactions 

Web 

Wph.Mnhilp 



,'2.0.50727 C:VYI[IDO\7S7'1iCTOSoft.NETfi 



2.0.0.0 V2.0. 50727 C:\WINDOWSWicrosoft, NETTr 

2.0.0.0 v2.0. 50727 C:\WINDOWS\MiCTOsoft.NETfr 

2.0.0.0 V2.0. 50727 C:\WINTOWS\Microsoft.NETYT 

2.0.0.0 V2.0.50727 C: WINDOWSVIicrosoft.NETfr 

2.0.0.0 v2.0. 50727 C:\WINDOWS\Microsoft.NETfr 

2.0.0.0 V2.0. 50727 C:\WINroWSWCTOSoft.NETfr 

2.0.0.0 V2.0.50727 C:\WINDOWSV«ticrosoft,NETyT 

2.0.0.0 v2.0. 50727 C:\WINDOWSV*Tosoft.NETV= r 

2.0.0.0 V2.0. 50727 C:\WINDOWSWarosoft.NETV=r 

2.0.0.0 V2.0.50727 C:\WINDOWS\Microsoft,NETV=r 

2.0.0.0 v2.0. 50727 C:\WINDOWSVIicrosoft.NETfr 

2.0.0.0 V2.0. 50727 C:\WINDOWSWcrosoft.NETV=r 

2.0.0.0 V2.0.50727 C:\WINDOWS\Microsoft,NETV=r 

7.0.0.0 v?.n. 50777 r^WINnOWSWirrnsnft NFT\Fr * 

I | kll 



A Figure 23-8 : Bolte de dialogue Ajouter une reference 



Fichier Assemblylnfo.vb 

II est stocke dans le dossier MyProject. Pour y acceder, affichez tous les fichiers 
du projet a l'aide du bouton situe dans la barre du haut, disponible lorsque le 
projet est selectionne. 



tous les fichiers 



Figure 23-9 : Bouton Afficher tous 
les fichiers 



Ce dossier contient les designers qui permettent d'afficher les onglets et les 
Editeurs de ressources ou de settings. 



Controls 
- _/ My Project 

+ ji] Application. myapp 

v f] Assemblylnfo.vb 
+ Resources. resx 
+ jj Settings. settings 



■< Figure 23-10 : Fichiers du dossier 
MyProject 



Le fichier Assemblylnfo.vb permet de specifier certaines informations sur 
l'assembly qui va etre genere, comme le nom, l'editeur ou la version, a l'aide 
de differents attributs. 

Un attribut sert a definir ce que Ton appelle une metadonnee sur une certaine 
partie de code. Les attributs sont associes a differentes fonctionnalites : 

■ les attributs d'information, pour apporter des precisions sur la donnee ; 

■ les attributs de permission, pour definir les droits d'acces a 1' element ; 
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■ les attributs de personnalisation, pour definir un comportement particulier ; 

■ les attributs systeme. 

lis peuvent etre places devant une classe, une methode, un membre ou tout 
autre element de code. Leur syntaxe de declaration est toujours la meme : 

<Attributl(), _ 
Attribut2(param)> 
Class | Property | Function | ... 

L'attribut TagPrefix, par exemple, permet de specifier le prefixe par defaut de 
la librairie de controle, qui sera applique a tous vos controles personnalises, 
pour empecher qu'ils prennent celui par defaut (ccl). 

ossembly: TagPrefix("Namespace.MyControls", "prefix")> 

Un controle depose dans l'Editeur ajoutera la directive Register et la balise du 
controle avec la syntaxe suivante : 

<%@ Register Assembly="Controls" Namespace="Controls" 
TagPrefix="prefix" %> 

<prefix:MyControl ID="MyControl " runat="server" /> 



23.2 Creation du controle composite 

Vous pouvez maintenant creer votre controle composite. Ajoutez done une 
classe DatePicker a votre librairie. 



Ajouter un nouvel element - Controls 



mm 



Mode les Visual Studio installes 








-^Windows Form 


,'J Bolte de dialogue 


1 Formulaire Explorateur 




j] Formulaire parent MD1 


| Bote de dialogue A propos de 


_"1 Formulaire de connexion 




L^ijEcran de demarrage 




Module 




Interface 


jl] Classe Component 


Classe COM 




^DataSet 


J Base de donnees 5QL 


9 Rapport 




J] Controle utilisateur 


^Formulaire herite 


CcmriCile uh'.i^ein hente 




^/j Controle personnalise 


^Controle Web personnalise 


^ Fichier de ressources 




Fichie' de parametres 


Fichier de code 


^ Diagramme de classes 




^Fichier XML 


Schema XML 


J? Fichier XSLT 




^ Fichier texte 


3 Page HTML 


^ Fichier bitmap 


fcj Fichier curseur 


iif| Fichier icone 


Fichier de configuration de I'applic, , . 




^ Composant tr ansae tionnel 


^ Classe Installer 


41] Service Windows 





Definition de classe vide 



Norn : | DatePicker. vb 



| Ajguter ] | Annuler ) 



▲ Figure 23-1 1 : Ajout de la classe DatePicker 
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Vous allez realiser un controle qui permet de saisir une date. II sera compose 
d'une zone de texte dans laquelle il sera possible de faire une saisie manuelle 
et d'une image qui affichera un calendrier a partir duquel vous pourrez 
selectionner une date. Voici les etapes de developpement successives decom- 
posers en plusieurs parties pour mieux comprendre le role de chacune. 

Heritage de la classe 

Tout d'abord, votre classe doit heriter de la classe abstraite Composi teControl : 

Public Class DatePicker 

Inherits Composi teControl 

End Class 



Ajout des controles enfants 

Ajoutez ensuite les trois controles en tant que membres prives. Les controles 
ImageButton et Calendar sont declares WithEvents car vous allez leur associer 
des evenements. 

Private tbDate As TextBox 

Private WithEvents imgBtnCalendar As ImageButton 
Private WithEvents calendar As Calendar 

Substituez la methode CreateChi 1 dControl pour y creer les controles et les 
ajouter au controle composite : 

Protected Overrides Sub CreateChi 1 dControl s() 
Controls. Clear() 
tbDate = New TextBox 
tbDate. ID = "tbDate" 
Control s.Add(tbDate) 

imgBtnCalendar = New ImageButton 
imgBtnCalendar. ID = "imgBtnCalendar" 
Control s . Add(imgBtnCal endar) 

calendar = New Calendar 
calendar. ID = "calendar" 
calendar. Visible = False 
Control s . Add(cal endar) 

End Sub 
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Ajout des proprieties 

Ajoutez les proprietes publiques que vous voulez rendre configurables par les 
developpeurs. Les valeurs de ces proprietes seront stockees dans l'etat d'affi- 
chage (ViewState). Voici par exemple la propriete Text : 

Public Property [Text] () As String 
Get 

Dim obj As Object = ViewState("Text") 
If Not IsNothing(obj) Then 

Return CType(obj, String) 
End If 
Return "" 
End Get 

Set(ByVal Value As String) 

ViewState("Text") = Value 
End Set 
End Property 

Vous mettrez egalement a disposition une propriete ImageUrl, qui permettra 
d'associer l'URL de l'image a 1' ImageButton, et une propriete Sel ectedDate, 
qui renverra la date selectionnee. 

Attributs de classe 

Configurez a present les attributs de la classe. II est interessant d' importer 
l'espace de noms System. ComponentModel , qui contient de nombreux attributs 
dont vous aurez besoin. Ces attributs servent a configurer differentes options, 
lis necessitent parfois certains parametres. 

<DefaultProperty("Text") , 
ToolboxData( 

"<{0} :DatePicker runat=server></{0} :DatePicker>") , 

ToolboxBitmap(GetType(DatePicker) , "DatePicker.bmp"), 

Desi gner (GetType (DatePi ckerDesi gner) ) > _ 
Public Class DatePi cker 

DefaultProperty 

L'attribut DefaultProperty permet de specifier la propriete par defaut du 
controle. 

ControlValueProperty 

L'attribut ControlValueProperty est utilise pour determiner qu'il s'agit de la 
propriete par defaut lorsque le controle est selectionne en tant que Control Pa- 
rameter d'une source de donnees (DataSource). Vous pouvez specifier le nom, 
le type et la valeur par defaut. 
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ToolboxBitmap 

L'attribut ToolboxBitmap permet d'afficher une icone specifique pour le 
controle dans la boite a outils de Visual Studio afin de remplacer 1' icone 



utilisee par defaut. 

Pour cela, vous devez avoir a disposition une image bitmap de 16x16 pixels 
en 16 couleurs. Vous pouvez copier une image ou la dessiner vous-meme. 



Ajouter un nouvel element - Controls 



Modeles Visual Studio installes 



J Windows Form 
_J] Formulaire parent MDI 
_^Ecran de demarrage 
•m Interface 
^yDataSet 
i| Controle utilisateur 
j/j Controle personnalise 
Fichier de parametres 
_^ Fichier XML 
js] Fichier texte 
tj Fichier curseur 
-V] Composant transactionnel 



,t] Boite de dialogue 
J Boite de dialogue A propos de 
v _eJ Classe 

di] Classe Component 

J Base de donnees SQL 
^Formulaire herite 
i^Controie Web personnalise 
*bJ Fichier de code 
^ Schema XML 

Page KTML 
B Fichier icone 
jd] Classe Installer 



^ Formulaire ExpJorateur 
jf?1 Formulaire de connexion 
9 Module 
& Classe COM 
I Rapport 

j| Controle utilisateur herite 
_Jj Fichier de ressources 
x| Diagramme de dasses 
Fichier XSLT 

■BB 

jj Fichier de configuration de I'applic. 
j}] Service Windows 



v 



Fichier bitmap Windows 



Nom : 



Controls.SampleWebContro1.bmp 



Ajouter 



▲ Figure 23-12 : Ajout d'une image bitmap 

Placez-la dans la racine de votre projet puis declarez-la comme ressource 
incorporee dans la propriete Action de generation. 



3 Avance 


1 Action de generation 


Ressource incorporee [v 


Copier dans le repertoire 


Au : -j-'- 


Espace de noms de I'outil 


Compiler 


Outil personnalise 


Contenu 


3 Divers 


Ressource incorporee 



A Figure 23-1 3 : 

Ressource incorporee 



Enfin, ajoutez l'attribut devant le nom de la classe du controle avec, en 
parametre, le type du controle et le nom de l'image associee. 



<ToolboxBitmap(gettype(MyControl) , "MyControl .bmp")> 
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ToolboxData 

L'attribut ToolboxData sert a personnaliser les balises generees par Visual 
Studio quand vous ajoutez une instance de votre controle dans l'editeur. Le {0} 
sera remplace par le prefixe specifie. 

<ToolboxData( 

"<{0} :DatePicker runat=" "server" "x/{0} :DatePicker>")> 

Attributs de propriete 

Les proprietes peuvent etre personnalisees avec des nombreux attributs, qui ont 
notamment des impacts sur l'Editeur de proprietes. Voici les attributs associes 
a la propriete Text : 

<Description("Le texte du bouton."), 

Category ("Appearance") , 

DefaultValueC"), _ 

Browsable(True) , 

Bindable(True) , 

Localizable(True)> 
Public Property [Text] () As String 



Le tableau suivant presente la plupart des attributs de propriete : 



Attributs appliques a des proprietes 


Attribut 


Description 


BrowsableAttribute 


Specifie si une propriete ou un evenement doivent 
etre affiches dans l'Explorateur de proprietes. 


CategoryAttribute 


Specifie le nom de la categorie dans laquelle 
regrouper une propriete ou un evenement. 


Descri pti onAttri bute 


Definit un petit bloc de texte a afficher en bas de 
l'Explorateur de proprietes lorsque l'utilisateur 
selectionne une propriete ou un evenement. 


BindableAttribute 


Specifie si une propriete est interessante a lier. 


Defaul tPropertyAttri bute 


Specifie la propriete par defaut pour le composant. 
Cette propriete est selectionnee dans l'Explorateur 
de proprietes lorsqu'un utilisateur clique sur le 
controle. 


DefaultValueAttribute 


Affecte une valeur par defaut simple a une 
propriete. 


EditorAttribute 


Specifie l'Editeur a utiliser pour modifier une 
propriete. 
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Attributs appliques a des proprietes 


Attribut 


Description 


Local i zabl eAttri bute 


Specifie qu'une propriete peut etre localisee. 
Toutes les proprietes qui possedent cet attribut 
sont automatiquement rendues persistantes dans le 
fichier de ressources lorsqu'un utilisateur choisit 
de localiser un formulaire. 


DesignerSerial ization 
VisibilityAttribute 


Specifie si (et comment) une propriete affichee 
dans l'Explorateur de proprietes doit etre 
persistante dans le code. 


TypeConverterAttri bute 


Specifie le convertisseur de type a utiliser pour 
convertir le type de la propriete dans un autre 
type de donnee. 


Def aul tEventAttri bute 


Specifie l'evenement par defaut pour le 
composant. 11 s'agit de l'evenement qui est 
selectionne dans l'Explorateur de proprietes 
lorsqu'un utilisateur clique sur le composant. 



Ajout d'un Editeur de proprietes 

Pour ajouter un editeur specifique a la propriete ImageUrl , vous pouvez utiliser 
l'attribut Editor avec comme type d'editeur un ImageUrl Editor : 



EditorAttribute(GetType( _ 

System. Web. UI .Design. ImageUrl Editor) , 

System. Drawi rig . Desi gn . UITypeEdi tor) 



GetType( 



Lorsque vous utiliserez votre controle, 1' Editeur de proprietes vous proposera 
de selectionner l'URL de l'image a partir d'une boite de dialogue. 



Dossiers du projet : Contenu du dossier : 

n .J* http;//lc.calhost/CPE/ControlTestj 



Fichiers image' 1 .gif;*.jpg; t '.ipeg;*.bmp;*.wmF;*.png) 



▲ Figure 23-14 : BoTte de dialogue Selectionner une image 
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^arque 

^* Editeurs de proprietes 

II existe de nombreux autres Editeurs de proprietes dans I'espace de noms 
System. Web. UI. Design. Vous pouvez egalement developper votre propre 
editeur. 



ns 
)re 



Gestion du rendu du controle 

Vous devez ensuite substituer la methode OnPreRender dans laquelle vous 
initialiserez les proprietes par defaut de controles enfants, comme l'adresse de 
l'image. 

Protected Overrides Sub OnPreRender(ByVal e As EventArgs) 
MyBase. OnPreRender (e) 

tbDate. Columns = 8 
tbDate. Enabled = Enabled 

imgBtnCalendar.AlternateText = Text 

If Not String. IsNullOrEmpty(ImageUrl) Then 

imgBtnCalendar.ImageUrl = ImageUrl 
End If 

End Sub 

Protected Overrides Sub Render ( 
ByVal writer As HtmlTextWriter) 
MyBase . Render (wri ter) 

End Sub 

Gestion des evenements 

II faut egalement ajouter deux methodes : 

■ Sur le clic de l'image, il faut afficher le calendrier. 

■ Lors de la selection d'une date dans le calendrier, il faut le cacher et 
afficher cette date dans la TextBox. 

Vous devez pour cela ajouter deux methodes de gestion d' evenements et 
associer les evenements a ces gestionnaires : 

1 Dans la methode CreateChildControls 
AddHandler imgBtnCalendar. Click, 
AddressOf onlmageButtonCl ick 
AddHandler calendar.SelectionChanged, 
AddressOf onSelectionChanged 
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1 Gestionnaires d'evenements 
Private Sub onlmageButtonCl ick( 
ByVal sender As System. Object, 
ByVal e As System. Web. UI. Imaged ickEventArgs) 
calendar. Visible = True 

End Sub 

Private Sub onSelectionChanged( 

ByVal sender As System. Object, ByVal e As System. EventArgs) 
tbDate.Text = calendar. SelectedDate.ToShortDateString 
calendar. Visible = False 
OnDateChanged (EventArgs . Empty) 
End Sub 

Ajout d'une image par defaut 

Vous pouvez ajouter une image par defaut en tant que ressource web. Les 
ressources web sont une nouveaute en ASP .NET 2.0 et permettent d'integrer 
facilement des fichiers dans votre librairie de controles et de les utiliser. 

Vous devez d'abord proceder de la meme fagon que pour l'icone, en ajoutant 
une image et en la transformant en ressource incorporee. 

Declarez ensuite la ressource au niveau de l'assembly dans le fichier Assem- 
blylnfo.vb, a l'aide de l'attribut WebResource : 

ossembly: WebResource("Calendar.gif", "image/gif")> 

Vous pourrez ainsi nommer la ressource (attention, il faut lui ajouter comme 
prefixe l'espace de noms) et preciser son type MIME. 

Pour vous servir de la ressource, utilisez la methode GetWebResourceUrl , qui 
recupere l'URL d'acces a la ressource : 

imgBtnCalendar.ImageUrl = 

Page .ClientScript. GetWebResourceUrl ( 
Me.Gettype, "Calendar.jpg") 



Ajout dans un projet 

Votre controle est termine. Vous pouvez creer un site web et utiliser le controle 
dans une page. Visual Studio a ajoute une reference au controle sous l'onglet 
Composants Controls de la boite a outils. II est ainsi facile de le glisser- 
deposer dans votre page. 



- Composants Controls 



1^ Pointeur 



■ SampleWebControl 



■< Figure 23-15 : Qnglet Composants 
Controls de la boTte a outils 
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Lorsque vous afficherez la page dans votre navigateur, vous pourrez cliquer sur 
1' image et selectionner une date grace au calendrier 
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Figure 23-16 : Controle 
□atePicker 



23.3 Creation du designer 

Si vous desirez a present faciliter la personnalisation des proprietes de 
votre controle, vous pouvez lui associer un smart tag, autrement dit une 
balise active. Un smart tag correspond a un volet de l'Editeur de Visual Studio. 
II sert a afficher les taches courantes associees a un controle. Les balises actives 
permettent aux composants et aux controles d' afficher des informations contex- 
tuelles et des commandes pour les utilisateurs. La plupart des controles serveurs 
possedent done un smart tag, accessible grace une petite fleche placee en haut 
a droite des controles. 

Vous allez tout d'abord creer la classe choisie precedemment avec l'attribut 
Designer. 

Substituez ensuite la propriete ActionLists de type DesignerActionListCol- 
lection, qui donne acces a la liste des elements du smart tag. 

Private lists As DesignerActionListCollection 

Public Overrides Readonly Property ActionListsQ 
As Desi gnerActi onLi stCol l ecti on 
Get 

If lists Is Nothing Then 

lists = New DesignerActionListCollectionO 
lists. Add( _ 
New DatePi ckerActi onLi st (Me. Component) ) 
End If 
Return lists 
End Get 
End Property 

Elle fait appel a une classe DatePi ckerActi onLi st. Cette classe peut etre interne 
puisqu'elle n'est pas utilisee ailleurs. Elle doit heriter de la classe System. 
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ComponentModel . Desi gn . Desi gnerActi onLi st. 
Public Class DatePickerActionList 

Inheri ts System. ComponentModel . Desi gn . Desi gnerActi onLi st 

Redefinissez la methode GetSortedActionltems. Elle va remplir les elements du 
smart tag. 

Public Overrides Function GetSortedActionltems () 

As DesignerActionltemCollection 
Dim items As New DesignerActionltemCol lectionQ 

i terns . Add (New Des i gnerActi onHeaderl tern ( " Propri etes " ) ) 

items. Add ( 

New DesignerActionPropertyItem( 

"Text", _ 

"Texte", _ 

"Appearance", 

"Texte")) 

Return items 

End Function 

Vous pouvez ajouter differents elements qui ont chacun leur specificite. Ainsi, 
un smart tag permet non seulement d'exposer des proprietes et de les regrouper 
par categories, comme dans la fenetre de proprietes standard de Visual Studio, 
mais egalement d'en ameliorer l'affichage et l'efficacite. Voici les differentes 
classes que vous pouvez utiliser pour ajouter un element a une liste d'elements 
d'un smart tag. 



Classes utilisees pour creer des elements dans un smart tag 


Classe 


Description 


DesignerActionltem 


Represente un element de panneau sur un panneau 
des balises actives. 


Desi gnerActi onLi st 


Definit une liste d'elements utilises pour creer un 
panneau des balises actives. 


Desi gnerActi onServi ce 


Etablit un service au moment du design, qui gere 
la collection d'objets DesignerActionltem pour les 
composants. 


Desi gnerActi onText Item 


Represente un element de texte statique sur un 
panneau. 


Desi gnerActi onPropertyltem 


Represente un element de panneau associe a une 
propriete dans une classe derivee de 
DesignerActionList. 
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Classes utilisees pour creer des elements dans un smart tag 


Classe 


Description 


Desi gnerActi onMethodltem 


Represente un element de panneau associe a une 
methode dans une classe derivee de 
Desi gnerActi onl_i st. 


DesignerActionHeaderltem 


Represente un element d'en-tete statique sur un 
panneau des balises actives. 



Vous obtenez ainsi un smart tag permettant de modifier facilement la propriete 
Text. 



^ Taches DatePicker 
Proprietes 

Texte Modifier 



< Figure 23-17 : Smart tag du 
controle DatePicker 



23.4 Check-list 

Dans ce chapitre, vous avez decouvert des nouvelles methodes de developpe- 
ment des controles serveurs personnalises. Vous pouvez developper simplement 
des controles qui correspondent a vos propres besoins et qui encapsulent des 
fonctionnalites interessantes. 

Voici un apercu des notions que vous avez pu acquerir : 

■ creation d'un controle composite ; 

■ affectation d'attributs de classe et de propriete ; 

■ association d'un Editeur de proprietes ; 

■ ajout et utilisation de ressources web ; 

■ association d'une icone a un controle serveur personnalise ; 

■ designer de controle ; 

■ creation de smart tag. 
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I Fichiers compresses et modele de projets Visual Studio 



Pour comprendre a quel point le Framework .NET 2.0 est vaste et permet de 
developper la plupart des applications couramment utilisees par un ordinateur, 
vous allez realiser un utilitaire de compression et de decompression de fichiers. 

Cette fonctionnalite de compression de fichiers n'etait pas disponible dans la 
version 1.1 du Framework, mais comme vous le verrez tout au long de ce 
chapitre, il est desormais facile de realiser ce genre de tache. 

La compression permet de minimiser la taille de fichiers et de repertoires pour 
pouvoir par exemple les transferer plus facilement ou encore lorsque l'espace 
de stockage est limite. 

L'environnement de developpement integre Visual Studio utilise lui-meme de 
nombreux fichiers compresses. Nous aurons l'occasion d'expliquer de quels 
genres de fichiers Visual Studio se sert pour, par exemple, gerer ses modeles de 
projets et de fichiers. Nous ferons egalement le point sur la fonctionnalite 
d'exportation de modeles de projets, disponible dans les dernieres versions de 
Visual Studio. 

24.1 Classes et espaces de noms 
utilises 

L'espace de noms System. IO. Compression contient les nouvelles classes aux- 
quelles vous ferez appel tout au long de ce chapitre. 

Seuls deux algorithmes de compression sont pris en charge : Deflate et Gzip. 

Si vous etes habitue a manipuler des fichiers grace aux nombreuses classes 
mises a disposition par l'espace de noms System. IO, vous n'aurez aucun souci 
pour comprendre comment fonctionne la compression de fichiers. 

24.2 Utilitaire de compression 
de fichiers 

L' application WinForm que vous allez developper permettra de compresser un 
fichier au format GZIP puis de le decompresses 

Creation du formulaire 

Le formulaire WinForm contient les controles suivants : 

■ des zones de saisie pour selectionner le chemin du fichier ; 

■ des boutons d'ouverture de boite de dialogue d' exploration pour trouver 
plus facilement un fichier ; 
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■ des boutons qui declenchent la compression ou la decompression. 
L'interface utilisateur obtenue est basique : 







JlJ J 








Rchier a compresser : 


[ Parcounr | 


[ Compresser 




Rchier a decompresser : 


| Parcounr | 


j Decompresser | 



▲ Figure 24-1 : Formulaire de I'utilitaire de compression 

Pour faciliter la recherche de fichiers sur le disque afin que l'utilisateur n'ait pas 
a saisir manuellement le chemin physique du fichier, vous pouvez deposer un 
composant OpenFileDialog dans votre formulaire. Pour ne lister que certains 
types de fichiers, vous pouvez configurer les parametres ad hoc, comme les 
extensions de fichiers acceptees. La propriete Fi Iter permet par exemple d'etre 
sur que le fichier selectionne dans la zone de saisie du fichier a decompresser 
a bien une extension .gzip. La valeur a passer correspond au libelle descriptif 
que vous voulez voir afficher, suivi du modele de nom de fichier a respecter, le 
tout separe par le caractere "I", par exemple : Fichier gzip|*.gzip, dans ce cas. 



| Fichier gzip | *.gzip 

1 



Filterlndex 
Filter 

Les filtres de fichier a afficher dans cette boite de 
dialogue, par exemple, Tichiers C-l'.csfTous les 
fichiersl*.*". 



< Figure 24-2 : Propriete Filter d'un 
composant OpenFileDialog 



Le code pour ouvrir la boite de dialogue et recuperer sa valeur ressemble a 
celui-ci : 



Private Sub BrowseSource_Cl ick(ByVal sender 

As System. Object, ByVal e As System. EventArgs) 
Handles btnBrowseFile. Click 



If Me. OpenFileDialog. ShowDialog = DialogResult.OK Then 

Me.tbFileToZip.Text = Me. OpenFileDialog. FileName 
End If 



End Sub 



D'autres boites de dialogue existent pour realiser ce genre d'operation, comme 
selectionner un emplacement d'enregistrement de fichier (SaveFi 1 eDi al og) ou 
selectionner un dossier (FolderBrowserDialog). Elles sont disponibles sous 
l'onglet BoTtes de dialogue de la boite a outils. 
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- Boites de dialogue 



\ Pointeur 

_T] ColorDialog 

_f) FolderBrowserDialog 

FontDialog 
if] OpenFileDialog 
^\ SaveFileDialog 



•4 Figure 24-3 : Onglet Boites de 
dialogue de la bolte a outils 

Compression d'un fichier 

La compression consiste a transformer le fichier en un flux afin de stocker son 
contenu dans un tableau d' octets, puis a declarer un flux de compression et a 
y ecrire la totalite du fichier. 

Dim zipFileName As String = Path.GetFileName(fileToZip) & _ 
".gzip" 

' Recuperation du fichier a compresser dans un flux 
Dim sourceStream As FileStream = 

New FileStream(fileToZip, FileMode.Open, 
FileAccess.Read, FileShare.Read) 



Dim buffer As Byte() = New Byte(sourceStream. Length) {} 
Dim length As Integer = sourceStream. Read(buffer, 0, 
buffer. Length) 

1 Ouverture du flux de sortie 

Dim destinationStream As FileStream = 

New FileStream(zipFileName, FileMode.OpenOrCreate, 
FileAccess. Write) 

1 Creation d'un flux de compression 
Dim compressedStream As GZipStream = 
New GZipStream(destinationStream, 
Compress ionMode. Compress, True) 

'Ecriture des donnees compressives vers le fichier 
'de destination 

compressedStream.wri te(buffer, 0, buffer. Length) 



Le fichier compresse dans 1' archive au format GZIP portera le meme nom que 
l'archive, mais sans l'extension .gzip. C'est pourquoi il est preferable de 
nommer l'archive avec le nom de fichier original accompagne de l'extension 
.gzip. Ainsi, apres avoir ete decompressed le fichier portera bien le nom original 
et ne perdra pas son extension initiale. 
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Decompression d'un fichier 

La decompression realise l'operation inverse. Le morceau de code le plus 
important est done : 

decompressedStream = New GZipStream(sourceStream, 
Compressi onMode. Decompress , True) 

On declare le flux de decompression dont on va servir pour, tout d'abord, lire 
le contenu du fichier compresse, puis l'enregistrer dans un fichier qui sera done 
la copie de l'original. 

Les fichiers compresses (que ce soit dans un format ou dans un autre) sont 
presents dans tous les logiciels avances des qu'il s'agit de stocker des donnees 
dans un minimum d'espace. Voyons quels genres de fichiers compresses vous 
pouvez retrouver dans Visual Studio. Par la meme, vous comprendrez mieux le 
fonctionnement des projets et de leurs elements, et decouvrirez qu'il est 
possible d'etendre Visual Studio en fonction de vos propres besoins ou de 
partager vos ressources. 

24.3 Utilisation de fichiers compresses 
par Visual Studio 

Visual Studio inclut par defaut de nombreux modeles predefinis de projets ou 
d'elements de projet. A la creation de chaque projet, vous selectionnez le 
modele de projet qui convient le mieux a votre application pour developper un 
site web, une bibliotheque de classes ou de controles ou encore une application 
WinForm. Vous ajoutez ensuite les elements de projet appropries, comme des 
pages des formulaires WebForm ou WinForm, des classes ou tout autre fichier 
pris en charge par Visual Studio. 

En plus des modeles installes disponibles et accessibles grace aux boites de 
dialogue Nouveau projet et Ajouter un nouvel element, vous pouvez acceder 
aux modeles que vous avez crees ou a d'autres qui ont ete developpes, comme 
des Starters Kits. 

ProjectTemplates et ItemTemplates 

Le repertoire principal de Visual Studio est C:\Program Files\Microsoft Visual 
Studio 8\. 

Par defaut, les modeles de projets et d'elements de projet Visual Basic sont 
stockes dans les sous-repertoires Common7\IDE\VWDExpress\ltemTemplates\ 
Web\VisualBasic\ 1 036 et Common 7VDE\VWDExpress\ProjectTemplates\Web\ 
Visual BasicM 036. 
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Vous y retrouverez par exemple 1' ensemble des elements que vous pouvez 
ajouter a un site web : 



[BrowserFile.zip 
J Class, sp 
§ ClassDiagram . zip 
§ DataSet.zip 
3 EmptyDatabase , zip 
§ GlobaiAsax.zip 
^§ Handler, zip 
§ HTMLPage.zip 
f§ j script, zip 
j§ MasterPage.zip 



§ Mobile WebConfig . zip 

j§ Mobile WebForm . zip 

§ Mobile WebUserCon trol , zip 

Nested WebConfig . zip 
§Report.zip 
Q Resource, zip 
§ SiteMap.zip 
§ SkinFile.zip 
§ Stylesheet, zip 
^TextFile.Zip 



§ vbscript.zip 
§ v <v dse ttings . zip 
§ WebConfig.zip 
^WebForm. zip 
§ WebService.zip 
3 WebUserCon trol . zip 
§ XMLFile.zip 
§ XMLSchema.zip 
§XSLTFile.zip 



A Figure 24-4 : 

Elements de projet 
web 



^arque 

^* Identificateur de parametres regionaux 

Le nombre 1036 qui figure dans certains noms de dossier correspond en fait 
a I'identificateur de parametres regionaux [LCD] de la culture francaise. De 
nombreux autres dossiers portent le nombre 1033 reserve a la culture 
anglaise. 



Templates Visual Studio 

Une fonctionnalite interessante fait son apparition dans les nouvelles versions 
de Visual Studio. Vous avez en effet la possibilite de creer vos propres modeles 
de projets en exportant un projet existant dont vous voudriez vous servir 
comme base pour de futurs projets. 

Voici les differentes etapes qui permettent de creer un modele de projet : 

1 La commande Exporter le modele du menu Fichier ouvre un Assistant qui 
va vous aider a personnaliser l'exportation de votre modele de projet. 

Fichier Edition Affichage Site Web Generer Debogue 

Nouveau ► 

Ouvrir ► 

Ajouter ► 

Fermer 
^ Fermer la solution 

Enregistrer App_Code/SQLResourceHelper.vb Ctrl+S 

Enregistrer App_Code/SQLResourceHelper.vb sous... 

Options d'enregistrement avancees. . . 
0 Enregistrer tout Ctrl4Maj+S 

Exporter le modele... 



•4 Figure 24-5 : 

Commande Exporter 
le modele du menu 
Fichier 
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2 La premiere etape est la selection du type de modele a exporter. Vous avez 
le choix entre exporter un projet ou un element de projet. Vous pouvez 
egalement choisir le langage cible a utiliser. 



Assistant Exportation de modele 



Choisir un type de modele 



Cet Assistant vous permet d'exporter un projet ou un element de projet de la solution actuelle vers un modele 
qui peut ensuite servir de base aux projets ulterieors. 
Quel type de modele souhaitez-vous creer ? 
© Modele de projet 

Un modele de projet permet a un uHlisateur de creer un projet base sur 1'exportation de voire projet. 
L'utilisateur est en mesure d'utiliser voire modele a paror de la boTte de dialogue Nouveau projet lorsgu'il 
s'agit de projets clients et a partr de la boite de dialogue Nouveau site Web brsqu'il s'agit de sites Web. 
■ Modele d'element 

Un modele d'element permet a un ublisateur tfajouter votre element a I'un de ses projets existants. 
L'utilisateur a acces a voire modele a partir de la boite de dialogue Ajouter un nouvel element. 
A partr de quel projet souhaitez-vous creer un modele ? 



CPE 




1 


Sous queEe categorie de lane 


age ce modele doit-il s'affichef dans la boite de dialogue Nouveau projet ? 




Visual Basic v 


Visual C* 






Visual Js 







[ Sjivant > | | Anrxier 



A Figure 24-6 : Assistant d'exportation de modele 

3 Si vous exportez un element de projet, deux etapes supplementaires de 
configuration sont necessaires. La premiere sert a selectionner l'element a 
exporter dans une arborescence des fichiers disponibles precedes par des 
cases a cocher de selection. 



Assistant Exportation de modele 



Selectionner l'element a exporter 



Selecbomez l'element a exporter en tant que modele d'element, Tous les fichiers dependants (y compris les 
fichiers de concepteur et les fichiers de ressources) sont automaSquement indus dans l'element selectionne du 
modele exporte , 
Element a exporter ; 
3 □ AppuCode 
_+J nApp_Data 
t □ App_GlobalResources 
±i H App_LocalResources 
□ Default.aspx 
| | web.config 
0 Web. sitemap 



| Annder 



▲ Figure 24-7 : Assistant d'exportation de modele 
Selectionner l'element a exporter 
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4 L' autre etape intermediate permet de selectionner des references dont 
vous voulez verifier 1' existence et de les inclure, si elles n' existent pas, 
lors de l'insertion de l'element. Vous vous assurez ainsi qu'il n'y aura pas 
d'erreur de compilation pour cause de reference manquante. 



Assistant Exportation modele 



betecticrfwier k» reference! sux element* 



H ■jW»m.(.on«»x«on. verw..LD.Oo.uiwe««euO*.«'ut*dC*»T«n.Ul.» -J x llDttuu* 

(~1 Sww»I»*»wc. wrm-J-O.Q.O. ft*rr*w-u«al. PiMnOVTakm^urVT I m«*U 
D T|*" Will. wwJ.0.10, Ci«Uf ^mrinri, PittattiTttw+ory* 1 insa*iA 

□ r.ywrm.UH, IW w? 0.0.0, fjArranvA !\*fc*/-,Tn*rti -B77A !C « WW*) 
C 5 ^ H — > ■ tWWI WtwJ.0.0.0, ftittfr* VutrM, FtMOtryTefcm^lOTiFJf ICfflAll 
. Q S|ih-i.»M.*U*, VnwJ.O.t.0, C,*-,r-ml,J, MAI^TiArn-aOWJFlinSlUU 
C rvoy, - - . I s T V * - - I ' " ■ 



▲ Figure 24-8 : Assistant d 'exportation de modele 
Selectionner les references aux elements 



5 La derniere etape Selectionner les options du modele permet de specifier 
certaines informations sur le modele a exporter, comme son nom, sa 
description ou une icone autre que celle par defaut. 



it exportation de modele 



ttfrwdumtfete: tan du motUfc : 

C aowm Ju-oiWt: 

(.: Voomnts and 5eUngsUhdnn«raKLS*tes dKunenCsVojal itudo ZQOIifV Lwted TemctottsWodete 
PI Mlib<ifvM^<>ntfaatH|«ul>d»ntel(hm*DlP 



▲ Figure 24-9 : Assistant d'exportation de modele : 
Selectionner les options du modele 
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L'emplacement du fichier ZIP genere se situe dans [Mes documents]\Visual 
Studio 2005\My Exported Templates. Si vous decompressez 1' archive obtenue, 
vous retrouverez 1' ensemble des fichiers qui constituent le projet ainsi qu'un 
fichier avec une extension .vstemplate. 



Templatelcon.ico 

16 x 16 
■ :;: - ,, " e 



^L--^ Defedt.aspx.vb 
| ^£^; I Visual Basic Source file 



MasterPage . master . vb 

Visual Basic Source file 
1Kb 



^ ProjectName.webproj 

Fichier WEBPROJ 
1Kb 



Default, aspx 

ASP.NET Server Page 
IKo 

MasterPage. master 

ASP.NET Master Page 
IKo 



MyTemplate. vstemplate 

^i^V Visual Studio Projectyitem Tern.. 
2Ko 

web.config 

' XML Configuration File 



■< Figure 24-10 : 

Fichiers contenus 
dans le modele de 
projet 

Fichier vstemplate 

Chaque modele inclut un fichier avec une extension .vstemplate, dote de 
metadonnees, qui fournit a Visual Studio les informations requises pour afficher 
le modele dans les boites de dialogue Nouveau projet et Ajouter un nouvel 
element et creer un projet ou un element a partir du modele. 



Structure d'un fichier . vstemplate 

Le fichier .vstemplate des modeles de projets se compose de trois elements 
fondamentaux : 

■ VSTemplate designe le type de modele (de projet ou d'element). 

■ Tempi ateData definit la categorie dans laquelle sera situe le modele de 
projet et les proprietes d'affichage de la boite de dialogue Nouveau projet 
ou Ajouter un nouvel element. 

■ Tempi ateContent regroupe l'ensemble des fichiers inclus dans le modele. 

La structure XML d'un fichier .vstemplate est done la suivante : 

<VSTemplate Type=" Project" Version="2.0.0" 
xmlns=" http://schemas.mi crosoft.com/ 

devel oper/vstempl ate/2005"> 
<Templ ateData> 

</TemplateData> 
<Templ ateContent> 

</Templ ateContent> 
</VSTempl ate> 
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Assistants 

En plus des elements XML fondamentaux d'un modele, vous pouvez utiliser les 
elements WizardExtension et WizardData pour ajouter les fonctionnalites per- 
sonnalisees a l'Assistant de modele qui cree un projet ou un element a partir du 
modele. Pour cela, vous devez creer vous-meme un assembly qui implemente 
l'interface IWizard, et en faire reference dans le fichier .vstemplate. 

ProjectSubType 

L'element ProjectSubType peut avoir les valeurs suivantes : 

■ Windows pour les applications WinForm ; 

■ Office pour les applications Visual Studio Tools For Office ; 

■ Database pour les bases de donnees ; 

■ Smart Devices pour les applications destinees aux peripheriques mobiles ; 

■ Web pour les sites web. 

Voici un exemple de fichier .vstemplate pour un element de projet : 

<VSTempl ate Version="2.0.0" Type="Item" Version="2.0.0"> 
<TemplateData> 

<Name>Nom du fichier</Name> 

<Descri pti on>Descri pti on</Descri pti on> 

<Icon>i cone . i co</Icon> 

<Proj ectType>VBas i c</Pro j ectType> 

<ProjectSubType>Windows</ProjectSubType> 

<Def aul tName>def aul tName . vb</Def aul tName> 
</TemplateData> 
<Templ ateContent> 

<Pro j ect I tem>Model e . vb</Pro j ect I tem> 
</Templ ateContent> 
</VSTempl ate> 



Ce tableau presente les differents elements XML que peut contenir un fichier 
.vstemplate : 



Elements d'un fichier .vstemplate 


Element 


Element enfant 


Attribut 


Assembly 






BuildOnLoad 






CreatelnPlace 






CreateNewFolder 






CustomParameter 




Name, Value 



378 • Le guide du codeur 



Utilisation de fichiers compresses par Visual Studio 




Elements d'un fichier .vstemplate 


dtMTltJilL 


CltMTltHlL GMTdML 


AH-mhi it- 
MLLI irJUL 


LUi LUIIIrdr dllleLcf b 


LUi LUIIIrdr dllltrLtrl 




Uc 1 dU 1 L iNdlllc 






UebLT i p L 1 uri 




rdCKdLJe 1 1U 


tridU 1 cLULd L 1 UrlDl UWbcDU L LUN 






rU 1 Ucr 


rlUJcLLlLclll 1 rUIUer 


Name 


TiiTTriacc Mama 
rU 1 1 L 1 dbblNdllle 






Hidden 






Icon 




Package 1 ID 


LocationField 






Locati onFi el dMRUPref i x 






Name 




Package 1 ID 


NumberOf ParentCategori es 
ToRollUp 






Project 


Folder 1 Projectltem 


File 1 Target Fi 1 eName 1 
ReplaceParameters 


ProjectCollection 


ProjectTemplateLink 1 
SolutionFolder 




Project I tern (modele 
d' element) 




SubType 1 

ReplaceParameters 1 
Target Fi 1 eName 


Project I tern (modele de 
projet) 




Target Fi 1 eName 1 
ReplaceParameters 1 
OpenlnEditor 1 OpenOrder 
1 OpenlnWebBrowser 1 

uptfrl 1 rinc 1 pDr Uwbfcrr 


r r UJ cL LoUU 1 j P" 






r l UJ cL lIcllipidlcLINK 




r l UJ cL LINdllle 


r i UJ cL I 1 y ptr 






Prompt ForSaveOnCreati on 






Provi deDef aul tName 






Reference 


Assembly 




References 


Reference 




ShowByDefault 






SolutionFolder 


ProjectTemplateLink 1 
SolutionFolder 


Name 
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Elements d'un fichier .vstemplate 


Element 


Element enfant 


Attribut 


SortOrder 






Support sCodeSeparati on 






Supports LanguageDropDown 






SupportsMasterPage 






Tempi ateContent 


ProjectCol lection 1 
Project 1 References 1 
Project I tern 1 
CustomParameters 




Tempi ateData 


Name 1 Description 1 Icon 
1 ProjectType 1 
ProjectSubType 1 
Tempi atelD 1 
Tempi ateGroupID 1 
SortOrder 1 
CreateNewFolder 1 
DefaultName 1 
ProvideDefaultName 1 
Prompt ForSaveOnCreati on 

EnableLocationBrowseButton 
1 Hidden 1 

Di spl aylnParentCategori es 
1 LocationFieldMRUPrefix 

1 

NumhprOf Parpnf fatpnnri p<^ 

ToRollUp 1 CreatelnPlace 
1 BuildOnLoad 1 
SnowByDefaul t 1 
LocationField 1 
SupportsMasterPage 1 
SupportsCodeSeparation 1 
Supports LanquageDropDown 




Tempi ateGroupID 






Tempi atelD 






VSTemplate 


Tempi ateData 1 
Tempi ateContent 1 
WizardExtension 1 
WizardData 


Type 1 Version 


WizardData 




Name 


WizardExtension 


Assembly 1 FullClassName 
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Fichiers cTinstallation .vsi 

Les fichiers d' installation (.vsi) de Visual Studio sont utilises pour echanger 
facilement un contenu Visual Studio. II s'agit en realite d'un fichier .zip 
renomme qui contient les fichiers que vous voulez mettre a disposition, mais 
egalement un fichier special avec une extension .vscontent, qui doit repondre a 
un schema XML precis. Ce fichier .vscontent fait de l'archive .vsi un veritable 
programme d' installation, qui permet d' installer votre contenu a un emplace- 
ment approprie detecte automatiquement par Visual Studio. 

Elements d'un fichier .vscontent 

L'element racine peut contenir un ou plusieurs elements Content qui servent a 
definir les contenus a installer. 



Elements d'un fichier .vscontent 


Element 


Description 


Fi 1 eName 


Sert a definir les fichiers a copier. 


Di spl ayName 


Nom du contenu a afficher dans le programme 
d' installation de contenu de Visual Studio. 


Description 


Description du contenu qui s'affiche en tant qu'info-bulle 
dans le programme d' installation de contenu de Visual 
Studio. 


FileContentType 


Type de contenu parmi les valeurs suivantes : 
VSTemplate : si le contenu est un Starter Kit ou un modele 
Visual Studio. Code Snippet : si le contenu est un extrait 
de code. Toolbox Control : si le contenu est un controle 
de boite a outils. Add in : si le contenu est un 
complement. Macro Project : si le contenu est un projet 
de macro. 


ContentVersion 


Version du contenu. 


Attributes 


Peut contenir aucun ou plusieurs elements Attributes. 


Attribute 


Information sur le contenu. 11 utilise des attributs de nom 
et de valeur pour ajouter les informations de contenu 
personnalisees. Exemple : <Attributes> 
<Attribute name="TemplateType" 

value="Project"/> </Attributes> 
Un contenu dote d'une valeur FileContentType de Code 
Snippet requiert 1 1 attri but lang, qui specifie le 
langage de programmation de 1 'extrait de code : 
VB, CSHARP, JSHARP ou XML. 
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Creation d'un fichier reinstallation 

Vous devez definir des valeurs et des attributs specifiques dans le fichier 
.vscontent afin de determiner comment et a quel emplacement installer le 
modele. 

Dans le fichier .vscontent, vous devez effectuer les operations suivantes : 

1 Specifiez dans l'element FileName le nom de fichier compresse qui 
contient le modele. 

2 Attribuez a l'element Fi 1 eContentType la valeur VSTemplate. 

3 Ajoutez les elements Attribute suivants : 

- ProjectType : specifie le type de projet, a savoir Visual Basic, Vi- 
sual C#, Visual J# ou Visual Web Developer. 

- ProjectSubType : specifie la sous-categorie dans laquelle sera place le 
modele dans la boite de dialogue Nouveau projet. 

- Tempi ateType : specifie le type de modele, a savoir Project pour les 
modeles de projets, ou Item pour les modeles d'elements de projet. 

L'exemple de code suivant montre a quoi doit ressembler le fichier .vscontent 
qui va servir a configurer l'installation du modele que vous venez de creer dans 
la categorie racine Visual Basic de la boite de dialogue Nouveau projet : 

<VSContent 

xmlns=" http://schemas.mi crosoft.com/ 

devel oper/vscontent/2005"> 
<Content> 

<Fi 1 eName>Model e.zi p</Fi 1 eName> 
<DisplayName>Modele de site web</DisplayName> 
<Description>Modele de site web</Description> 
<Fi 1 eContentType>VSTempl ate</Fi 1 eContentType> 
<ContentVersi on>l . 0</ContentVersi on> 
<Attributes> 

<Attribute name="Templ ateType" 

value="Project"/> 
<Attribute name="ProjectType" 

val ue="Visual Web Devel oper"/> 
<Attribute name="ProjectSiibType" 
val ue="VisualBasic"/> 
</Attributes> 
</Content> 
</VSContent> 

Apres avoir enregistre ce fichier au meme emplacement que le modele de 
projet, ajoutez-les a une archive compressee puis renommez-la avec une 
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extension .vsi. Le fichier apparait alors avec une icone signifiant qu'il est 
reconnu par Visual Studio. 



< Figure 24-11 : FichierVSI 



Installation a partir d'un fichier .vsi 

L'installation du modele sur un autre poste est simple. II suffit d'executer le 
fichier d' installation et de suivre les etapes. 

1 La premiere etape affiche le ou les elements qui vont etre installes. Vous 
avez la possibilite de ne selectionner que ceux qui vous interessent. 



Programme d'installation de contenu Visual Studio 



Selectionner le contenu a installer 



Quels sont le ou les elements de contenu que vous souhaitez installer ? 
Modeles et Starter Kits 

0 Modele de site web 



afficher le;- fichier; dars : 'Explc ratem- n ?,c 
Informations sur lediteur 
Editeur : (Inconnu) 
URL 



d'information : 



(Non disponible) 



Suivant ; 



▲ Figure 24-12 : Selection du contenu a installer 
2 Si le projet n'a pas ete signe, un message d'alerte vous le signale. 



Signature introuvable 



Le fichierde contenu que vous essayez d'installer n'est pas 
signe etcontient peut-etre du code dangereux. Etes-vous sur 
de vouloir installer ce contenu ? 



Pour visualiser les fichiers qui seront installes sur votreordinateur, 
cliquez sur Non, puis sur Afficherles fichiers dans I'Explorateur 
Windows. 



< Figure 24-13 : 

Message d'alerte 

"Signature 

introuvable" 
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3 Si vous executez une seconde fois cette installation ou si un fichier .zip du 
meme nom que le modele existe deja, une boite de dialogue vous demande 
de quelle fagon vous voulez agir. S'il s'agit d'un remplacement, nous 
conseillons de choisir Remplacer le fichier portant le meme nom. 



Un element portant le nom Site .zip existe deja. 
Que voulez-vous faire ? 

O Renommer le nouveau fichier en "Site(2).zip" 
(•) Remplacer le fichier portant le meme nom 
O Ignorer I ecriture de ce fichier sur le disque 



Figure 24-14 : 

BoTte de dialogue Le 
fichier existe 



4 Enfin, validez 1' installation et observez le deroulement de 1' operation. 



Programme d'installation de contenu Visual Studio 



□ 



a. 



Installation du contenu 



Etat : Installation terminee. 



Detail:- : 



Modeles et Starter Kits 

Modele de site web 



Installation terminee. 



< Precedent Sutvant > 



▲ Figure 24-15 : Deroulement de installation 

5 Si vous cliquez sur le lien Installation terminee, une fenetre recapitulative 
s'ouvre indiquant notamment les repertoires dans lesquels le modele a ete 
copie. 
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fist: 

Installation terminee 



Les fichiers suivants ont ete installes. Le programme d'installation a peut-etre 
effectue d'autres operations, comme la creation de cles de base de registres 
systeme. 



'05 Templates \ProjectTemplates\Wsual Web Developer\Site.zip 
05\Ternplates\ProjectTerriplates\Msijal Web DeveloperWisual Basic \Site zip 



Un Starter Kit n'est autre qu'un modele de projet un peu ameliore. La 
difference est notamment qu'un Starter Kit inclut souvent en complement une 
documentation detaillee de l'application mise a disposition. 

Recherche et partage de Starter Kits 

Dans la boite de dialogue Nouveau projet, vous trouverez une liste de Starter 
Kits installes avec Visual Studio. Vous pourrez rechercher et telecharger des 
Starter Kits a partir de sites web qui prennent en charge les services Web Visual 
Studio. 

Utilisation de Starter Kits pour creer des projets 

Visual Studio 2005 inclut plusieurs Starter Kits a utiliser comme exemple. 

Pour creer un projet a partir d'un Starter Kit inclus dans Visual Studio, 
selectionnez la commande Nouveau/Fichier du menu Fichier. 

Dans la liste Types de projet de la boite de dialogue Nouveau projet, develop- 
pez les nrjeuds correspondant au langage de programmation souhaite, puis 
cliquez sur Starter Kits. 

Selectionnez un Starter Kit, entrez le nom du nouveau projet et cliquez sur OK. 



< 



> 



Figure 24-1 6 : 

Rapport sur I'etat 
d'installation 




Starter Kits 
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Nouveau projet 



Types de projets : 
1 Visual Basic 

Office 
+ Smart Device 
Base de donn ees 

+ Visual C* 

+ Autres types de projets 



m\m 



Modeles Visual Studio installed 



Starter Kit Ma cinematheque 
Mes modeles 

. jRechercher des modeles en ligne.., 



4 Starter Kit Ecran de veille 



Une application exempJe pour effectuer le suivi d'une collection de films. Comprend le code source et des didactidels. 



M yMo vieCollection 1 



Nom : 

Emplacement 
Solution : Creer une nouvelle solution 



C:V3ocuments and Settings \AdministrateurWes documents\Visual Studio 2005V>rojects\ 



v Parcourir,. 



Nom de solution : 



| MyMovieCollectionl 



v j 0 Creer le repertoire pour la solution 
| | Ajouter au controle de code source 



▲ Figure 24-1 7 : Ajouter un nouveau projet Starter Kit 



24.4 Check-list 

Le Framework 1.1 ne permettait pas de compresser et de decompresser des 
fichiers. Desormais, cela est possible grace aux nouvelles classes de l'espace de 
noms System. 10. Compression. 

L'utilisation des fichiers compresses est couramment repandue pour repondre a 
differentes problematiques d' optimisation. Meme Visual Studio a recours a 
certains fichiers compresses pour stacker ces modeles de projets. 

Vous avez decouvert les differentes fa5ons de creer vos propres modeles de 
projets et appris a les accompagner de programme d'installation ou a person- 
naliser leur ouverture. 

Plus precisement, les fonctionnalites abordees ont ete les suivantes : 

■ la creation d'un modele de projet ou d'element de projet (.vstemplate) ; 

■ la creation d'un fichier .vscontent ; 

■ la creation d'un programme d'installation .vsi ; 

■ l'execution d'un programme d'installation ; 

■ la creation d'un projet a partir d'un Starter Kit. 
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Toutes ces fonctionnalites rentrent dans une demarche de partage de 1' infor- 
mation et d'empaquetage de solutions pretes a l'emploi. Cela vous oblige 
notamment a faire le point sur vos methodologies de developpement et a vous 
questionner sur les differentes fajons de reutiliser des elements interessants que 
vous avez mis en place afin de gagner du temps par la suite. 
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Protocole FTP 390 

Serveur FTP 390 

Client FTP 399 

Check-list 407 




Creation d'un client FTP 



Le protocole de transfert de fichiers FTP est couramment utilise pour telechar- 
ger des fichiers. Pour vous connecter a un serveur FTP, vous avez recours a un 
logiciel appele "client FTP", qui permet de gerer facilement les fichiers qui s'y 
trouvent. 

Dans ce chapitre, vous apprendrez tout d'abord a installer un serveur FTP et a 
le configurer puis a utiliser un client FTP. Enfin, vous creerez une classe d'aide 
pour la connexion a un serveur FTP, et des operations de base au moyen des 
classes de l'espace de noms System. Net. 

25.1 Protocole FTP 

Le protocole FTP repond a certaines normes et les operations que vous pouvez 
effectuer lorsque vous vous connectez a un serveur FTP sont codifiees. En 
d'autres termes, FTP repond a une syntaxe de commandes et de codes de 
reponse precise. 

Les differentes operations possibles sont : 

■ la connexion au serveur FTP ; 

■ le telechargement de fichiers du serveur vers la machine locale (down- 
load) ; 

■ le telechargement de fichiers de la machine locale vers le serveur 
(upload) ; 

■ la creation et la suppression de repertoires ; 

■ le listage de repertoires ; 

■ la navigation entre les repertoires (affectation du repertoire courant). 

25.2 Serveur FTP 
Installation d'un serveur FTP 

Pour effectuer des tests, il faut un serveur FTP a disposition sur lequel effectuer 
les requetes. Nous allons tout d'abord vous presenter un exemple de serveur 
FTP qui possede toutes les fonctionnalites de base de ce genre de logiciel. 

Le logiciel FileZillaServer est un serveur FTP gratuit, telechargeable a partir du 
site http://sourceforge.net/projects/filezilla. http://sourceforge.net regroupe de nom- 
breux projets open source. Apres avoir recupere l'executable, realisez les etapes 
d' installation et de configuration suivantes : 

1 Lancez l'executable d' installation. 
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FileZilla_5erver.exe 



■< Figure 25-1 : Executable 
□"installation de FileZillaServer 



2 Le premier ecran vous demande d' accepter les termes du contrat de licence 
utilisateur. 



*Z FileZilla Server beta 0.9.16c Setup 



License Agreement 

Please review the license terms before installing FileZilla Server beta 0.9. 16c, 



Press Page Down to see the rest of the agreement, 



GNU GENERAL PUBLIC LICENSE 
Version 2, June 1991 

Copyright (C) 1939, 1991 Free Software Foundation, Inc. 

59 Temple Place, Suite 330, Boston, MA 02111-1307 USA 
Everyone is permitted to copy and distribute verbatim copies 
of this license document, but changing it is not allowed. 

Preamble 

The licenses for most software are designed to take away your 

If you accept the terms of the agreement, click I Agree to continue, You must accept the 
agreement to install FileZilla Server beta 0.9.16c. 



Nullsoft Install System 2.15 - 



I Agree | [ Cance~ 



▲ Figure 25-2 : Contrat de licence utilisateur 

3 L'ecran suivant vous permet de selectionner les composants qui vont etre 
installes, notamment le serveur FTP et une interface d' administration. 



FileZilla Server beta 0.9.16c Setup 



Choose Components 

Choose which rootuics of F loZil o Set vet ix-to j,9, Idc you 'A' art tc nstol . 



Check the components you want to install and uncheck the components you don't want to 
install, Click Next to continue, 



Select the type of install: 

Or, select the optional 
components you wish to 
install: 



Space required: 7.7MB 

Nullsoft Install System 2.15- 



0 FileZilla Server (Service) 
0 Administration interface 
0 Source Code 
0 Start Menu Shortcuts 
0 Desktop Icon 



Description 

Position your mouse 
over a component to 
; see its description. 



< Back Next > 



▲ Figure 25-3 : Selection des composants a installer 
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4 L' Assistant vous demande ensuite de specifier le repertoire d'installation. 



FileZilla Server beta 0.9.1 6c Setup 



Bill® 



Choose Install Location 

Choose the folder in which to install FileZilla Server beta 0,9, 16c. 



Setup will install FileZilla Server beta 0,9, 16c in the following folder, To install in a different 
folder, click Browse and select another folder. Click Next to continue, 



Destination Folder 



Space required: 7,7MB 
Space available: 17,3GB 



Nullsoft Install Svstern 2 l c - 



<Back Next > 



▲ Figure 25-4 : Selection du repertoire d'installation 
5 Selectionnez le mode de demarrage du serveur FTP et son port. 



FileZilla Server beta 0.9.1 6c Setup 



Startup settings 

Select startup behaviour for FileZilla Server 



Bin® 



Please choose how FileZilla Server should be started: 



Install as service, started with Windows (default) 



Please choose the port, the admin interface of FileZilla Server should listen on (1-65535): 



R] Start Server after setup completes 

Nullsoft Install System 2.15 



▲ Figure 25-5 : Configuration des parametres de demarrage du serveur 

Vous avez le choix entre installer un service (c'est l'option preferable) qui 
demarre automatiquement avec Windows ou manuellement ou de ne pas 
installer de service. 
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Please choose how FileZilla Server should be started: 
Install as service, started with Windows (default) 



Install di- service, started with Windows (default) 



Install as service, started manually 

Do nut install as service, start server automatically (nor recommended) 



▲ Figure 25-6 : Selection du mode de demarrage du serveur 

B Indiquez si l'interface d' administration doit etre demarree manuellement 
ou quand un utilisateur se connecte et si elle demarre pour tous les 
utilisateurs ou seulement pour celui en cours. 



fz FileZilla Server beta 0.9.1 6c Setup 


EN® 


Startup settings 




Select startup behaviour for FileZilla Server 


n 



Please chose how the server interface should be started: 



0 Start Interface after setup completes 



Nullsoft Install System 2.15- 



< Back Install 



▲ Figure 25-7 : Selection du mode de demarrage : a la connexion de I'utilisateur 



^arque 

^ Demarrage du serveur apres {'installation 

Laissez les cases Starts Server after setup completes et Starts Interface after setup 
completes cochees afin que le serveur et l'interface d'administration demarrent 
la fin de ^installation. 



jp 

y 



7 Le dernier ecran vous montre la progression de 1' installation et les 
composants qui sont installes. 



Le guide du codeur • 393 




Creation d'un client FTP 
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Installation Complete 

Setup was completed successfully. 



Completed 

i »» * 

Create folder: C:\Docurnents and Settings\Administrateur\Menu Dernarrer\Programm, , , ^ 
Create shortcut: C:\Docurnents and Settings\Administrateur\Menu Demarrer\Progra... 
Create shortcut: C:\Docurnents and Settings\Administrateur\Menu Demarrer\Progra... 
Create shortcut: C:\Docurnents and Settings\Administrateur\Menu Demarrer\Progra... 
Create shortcut: C:\Docurnents and Settings\Administrateur\Menu Demarrer\Progra... 
Create shortcut: C:\Docurnents and Settings\Administrateur\Bureau\FileZilla Server I... 
Execute: "C:\Program Files\FileZilla Server\FileZilla Server.exe" /adminport 14147 
Execute: "C:\Prograrn Files\FileZilla Server\FileZilla Server Interface.exe" /adminport I 
Installing Service... 

Execute: "C:\Program Files\FileZilla Server\FileZilla Server.exe" /install auto 

Put FileZilla Server Interface into registry. . . 

Completed 



Nullsoft Install System 2. 15 

< Back | | Close "~| ancel 



▲ Figure 25-8 : Ecran de progression de installation 

8 L'interface d' administration se lance alors comme prevu. II s'agit en 
realite d'une fenetre a partir de laquelle vous pouvez voir l'activite de 
votre serveur FTP, c'est-a-dire les commandes qui lui sont demandees et 
les reponses qu'il renvoie. Elle affiche ce qu'on appelle les logs (journaux) 
du serveur. 



Z FileZilla server 



File Server Edit ? 



a Sifigt I'M'* 

FileZilla Server version 0.9.16c beta 

Copyiight 2001 -2006 by Tim Kosse (tim.kosse@filezilla-pioject.oig) 

Connecting to server.. 

Connected, waiting for authentication 

Logged on 



ID / Account IP Transfer 



^ | | >_ 

Ready 0 bytes received 0 B/s 0 bytes sent 0 B/s » ■*> 

▲ Figure 25-9 : Interface d'administration du serveur FTP FileZilla 
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Cette interface indique notamment qu'elle est connectee au serveur et qu'elle 
est dans l'attente de 1'authentification d'un utilisateur. 



Creation d'un utilisateur 

Vous allez maintenant creer un utilisateur qui pourra acceder a votre serveur 
FTP. Vous indiquerez son identifiant (login), son mot de passe et definirez les 
repertoires de la machine qu'il peut visiter, en lecture et/ou en ecriture, ou dans 
lesquels il ne peut naviguer. Vous specifierez au besoin le taux de transfert 
maximum a ne pas depasser. En outre, vous etes libre d'autoriser les 
connexions provenant de certaines adresses ou plages d'adresses IP, qu'il vous 
faudra preciser. 

Voici les etapes de creation d'un utilisateur : 

1 Dans le menu Edit, selectionnez la commande Users pour gerer les 
utilisateurs du serveur. 




Figure 25-10 : Commande 
Edit/Users 

2 La fenetre de gestion des utilisateurs s'ouvre. Aucun utilisateur n'est 
present pour le moment dans la liste situee a droite. 



Page: 



General 
Shared tolders 
Speed Limits 
IP Filler 



Account settings 

M Enable account 
PI Password: 

Group membership: 



Bypass userlimit of server 
Maximum connection count: 



Connection limit per IP: 




You can enter come comment? about the Lie: 



▲ Figure 25-1 1 : Interface d'administration du serveur FTP FileZilla 
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Add | Cliquer sur le bouton Add. 



4 La boite de dialogue d'ajout d'un utilisateur s'ouvre. Saisissez le nom 
d'utilisateur test. 



Add user account 



Please enter the name of the user account that should 
be added: 



test 


Uset should be mer 


iber of the following cjroup: 







A Figure 25-12 : 

BoTte de dialogue 
d'ajout d'un 
utilisateur 



5 test est ajoute dans la liste des utilisateurs. Vous pouvez Tactiver en 
cochant la case Enable account et specifier son mot de passe en cochant la 
case Password et en le saisissant. 



Page: 



General 
Shared folder:;: 
Speed Limits 
IP Filter 



OK 



Cancel 



Account settings 
0 Enable account 
[^Password: I 



Group membership; ^none := 



□ Bypass userlimit of server 
Maximum connection count: O 



Connection limit per IP: 
I I Force SSL for user login 

Description 



You can enter some comments about the user 






Add ] 


I Remove 




Rename ] 


| Com 



▲ Figure 25-13 : Activation du compte et affectation du mot de passe 

E Selectionnez la page Shared folders pour lui attribuer des repertoires qu'il 
peut visiter. 
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Page: 



General 



Directories 

H C:\Docurnents and Settings Wdministrai 



Files 

Read 

— Wfite 
Delete 
Append 

Directories 

Create 
Delete 
List 

+ Subdirs 





| Add 


f Remove 


Rename 


Set as home dir 





Add | 


Remove | 






Rename | 


Com 1 



A directory alias will also appear at the specified location. Aliases must contain the full local 

path. Separate multiple aliases for one directory with the pipe character ( I ) 

If using aliases, please avoid cyclic directory structures, it will only confuse FTP clients. 



▲ Figure 25-14 : Page Shared folders 

7 Pour ajouter un repertoire, cliquez sur le bouton Add. Une botte de 
dialogue s'ouvre. 



Rechercher un dossier 



Please select a folder that should be added to the folders list 
of the selected user account. 



C:\Docurnents and 5ettings\Administrateur\Mes documents 



;-l y9 Bureau 

-i j Poste de travail 
l±J ^ Disque local (C:) 
ffi ^ DATA (D:) 
IS ^J, Lecteur DVD-RAM (E:) 
IS J, Lecteur DVD (F:) 
IS !^| Documents partages 
i+i Q Documents de Administrates 
i+i lt _J) Documents de wygwam 
Si ^ Mes dossiers de partage 



OK 



Figure 25-1 5 

Selection d'un 
repertoire que 
I'utilisateur peut 
visiter 



8 Selectionnez le repertoire et specifiez les droits de I'utilisateur, comme la 
creation ou la suppression de repertoires ou la lecture ou l'ecriture de 
fichiers. 
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Page: 



General 
Shared folders 
Speed Limits 
IP Filter 



Directories 

H Mes documents 



Files 

ERead 
write 
0 Delete 
□ Append 

Directories 
0 Create 
E Delete 
0List 
PI + Subdirs 



Add | j Remove | | Rename | j;Set as borne d»| Rename ] | Cop^ ] 



Add Remove 



A directory alias will also appear at the specilied location Aliases must contain the full local 

path. Separate multiple aliases tor one directory with the pipe character ( I ] 

If using aliases, please avoid cyclic directory structures, it will only confuse FTP clients. 



A Figure 25-16 : Affectation des droits de I'utilisateur dans un repertoire 

9 |seta;homedi7| Vous pouvez egalement choisir ce repertoire comme etant celui 
par defaut grace au bouton Set as home dir. 

10 La page Speed Limits permet de limiter le taux de transfert sur le 
telechargement de fichiers. 



Page: 



General 
Shared folders 



Download Speed Limit 
© Default 
O No Limit 

O Constant Speed Limit of 
O Use Speed Limit Rules: 



O Bypass server download speed limit 

IkB/s 



I Add I 
Remove I 



Upload Speed Limit 
© Default 
0 No Limit 




O Constant Speed Limit of 
O Use Speed Limit Rules: 



I I Bypass server upload speed limit 
kB/s 



Add 
Remove 

I Up I 
Down 



7] | Copy | 



▲ Figure 25-17 : Page Speed Limits 
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11 La page IP Filter permet d'indiquer des adresses ou des plages d'adresses 
IP pour lesquelles Faeces est autorise. 



Page: 



General 
Shaied folders 
Speed Limits 



The following IP addresses are not allowed to connect to the 
server: 



Exclude the following IPs from the list of disallowed IPs, thus 
enabling access again: 



Add Remove 



5] [ Copy 



In addition to single IP addresses, you can enter IPs with 
wildcards, IP address ranges, use the IP/subnet syntax or 
regular expressions (enclosed in slashes) to filter hostnames. 

By default everyone may connect to the server. You may either block individual IP 
addresses or address ranges. If you block all addresses, you may allow access for 
individual addresses or ranges again. 

If using groups, the user IP limits don't replace the group IP limits, they only extend the 
group limits. 



▲ Figure 25-18 : Page IP Filter 



25.3 Client FTP 

Voici un apercu, cote client, du logiciel de gestion de transfert FTP FileZilla. 
Son interface est un peu plus evoluee que la precedente et permet de telecharger 
des fichiers sur un serveur vers votre machine locale, ou inversement d'uploa- 
der des fichiers dans un repertoire du serveur. Ce logiciel presente deux 
avantages : il est traduit en francais et il est simple d'utilisation grace a une 
interface graphique efficace composee d'Explorateurs, de fenetres de logs, de 
progression des transferts, etc. (voir Figure 25-19). 

Vous pouvez facilement naviguer dans les repertoires de votre machine et du 
serveur, et glisser-deplacer des fichiers entre Tun et l'autre. 

Voici quelques fonctionnalites interessantes de FileZilla. On les retrouve 
habituellement dans de ce genre de logiciel. 
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□BBS 



Fichier Edition Transfert Afhchage File d'Attente Serveur Aide 

i a- (Bb-.(F«iD a « & r ? 

Utilisateui Mot de passe 



| l.i:inne:-:ion Rapide | v 



Site Local : C: M netpub\wwwrootV 








Site Distant : 






h 4J wwwroot 








Nom 


Taille Type 


Date 






Q .private 


















Q _vti_cnf 


















Q _vti_!og 


















|£) _vti_pvt 














Nom 


Tale 


Type 


Modifie 


A 








_J- 


















j private 


Dossier de fichiers 


06/03/2006 22:54 










Q_vti_cnf 


Dossier de fichiers 


20/07/2006 12:24 


V 




j | 


til 


83 dossiers et 14 fichiers avec 257934 octets, 





Nom de fichier local Tailre Direction Norn de fichier distant Hote Etat 



File d'attente ; 0 octets * 



A Figure 25-19 : Interface graphique de FileZilla 

Connexion rapide 

Grace a une barre composee de plusieurs zones de saisie, vous pouvez vous 
connecter facilement a un serveur FTP en fournissant vos informations de 
connexion, c'est-a-dire essentiellement l'adresse du serveur, votre nom d'uti- 
lisateur et votre mot de passe. Dans ce cas, l'adresse du serveur FTP est 
ftp://localhost. 



Adiesse : 


localhost j Utilisateur : [test Mot de passe: mm 


J Port: |21 


[ Connexion Rapide | V 


Etat : 


Connexion a localhost ... 






Etat: 


Connecte a localhost. Attente du message d'accueil... 






Reponse : 


220-FileZilla Server version 0.9 1 6c beta 






Reponse : 


220-witten by Tim Kosse [Tim.Kosse@gmx.de] 






Reponse : 


220 Please visit http://sou1ceforge.net/proiects/file2illa/ 






Commande 


USER test 






Reponse . 


331 Password required for test 






Commande 


PASS **** 






Reponse : 


230 Logged on 







▲ Figure 25-20 : Barre de connexion rapide 

Le bouton Connexion Rapide enregistre les dernieres adresses auxquelles vous 
avez essaye de vous connecter. 



Connexion Rapide |^ 



5e connecter en passant outre le proxy 
Effacer 



test@localhost 



■< Figure 25-21 : Bouton de 
connexion rapide 
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I 



Enregistrer une connexion 



Si vous vous connectez souvent a une adresse FTP precise, vous pouvez choisir 
de l'enregistrer dans le gestionnaire de sites qui stocke plusieurs connexions et 
vous permet de les gerer et de vous connecter facilement aux serveurs FTP 
correspondants. 

Pour enregistrer une connexion, procedez aux etapes suivantes : 

Cliquez sur le bouton d'affichage du gestionnaire de sites. 



2 La fenetre de gestion des sites s'affiche, avec la liste des sites enregistres 
d'un cote et un formulaire de configuration des connexions permettant de 
specifier notamment les informations de connexion. 



Gestionnaire de sites 



Fichier 



Mes Sites FTP 



Nouveau site FTP 



| Nouveau site | | Lreer dossier | bufjprimer 



Lopier 



Details du site 

Hote: 

localhost 



Port : 
21 



Type de serveur 



FTP 



Type d'authentification 
O Anonyme 0 Normal Q Account 
I I Contourner les parametres proxy / pare-f ei 



Utilisateur 



test 



Mot de passe : 



I | Ne pas enregistrer le mot de passe. 
Commentaires 



O Site par def_ aut 



inregistrer et Quitter 



A Figure 25-22 : Gestionnaire de sites 

1 1 Nouveau site | Le bouton Nouveau Site permet d' ajouter une nouvelle 
connexion que vous devez ensuite configurer. 



|©sjte par defaut | Vous pouvez la designer comme la connexion par defaut en 
activant le bouton radio site par defaut. 

Cliquez enfin sur Enregistrer et quitter. 
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E Votre connexion est desormais enregistree. Vous y accederez facilement en 
cliquant sur la fleche situee a cote du bouton du gestionnaire de sites. 



Figure 25-23 : Connexion a un 
site enregistre dans le gestionnaire 
de sites 



f- K K fa B 

Nouveau site FTP 



Fenetre d'affichage du journal des messages 

La fenetre d'affichage du journal des messages permet de visualiser les 
messages echanges entre le client et le serveur. On distingue trois types de 
messages : 

■ Etat indique l'etat du serveur ou l'operation qu'il est en train de realiser. 

■ Reponse indique une reponse du serveur, avec comme prefixe un code de 
trois chiffres. 

■ Commande indique une commande du client FTP. 

Voici une liste d'instructions echangees entre le client et le serveur FTP au 
moment de la connexion d'un utilisateur et du listage d'un repertoire : 



Etat : 
Etat : 
Reponse 
Reponse 
Reponse 
http://sou 
Commande 
Reponse 
Commande 
Reponse 
Commande 
Reponse 
Reponse 
Reponse 
Reponse 
Reponse 
Reponse 
Reponse 
Reponse 
Commande 
Reponse : 
Commande 
Reponse : 
Commande 
Reponse : 
Etat : 
Etat : 



Connexion a local host... 

Connects a local host. Attente du message d'accueil 
220-FileZilla Server version 0.9.16c beta 
220-written by Tim Kosse (Tim.Kosse@gmx.de) 
220 Please visit 
rceforge. net/projects/f i 1 ezi 11 a/ 
USER test 

331 Password required for test 
PASS **** 
230 Logged on 

FEAT 
211-Features: 
MDTM 

REST STREAM 
SIZE 

MLST type*;size*;modify*; 
UTF8 
CLNT 
211 End 

CLNT FileZilla 
200 Don't care 
OPTS UTF8 ON 
200 UTF8 mode enabled 
SYST 

215 UNIX emulated by FileZilla 
Connecte 

Recuperation de la liste de repertoires... 
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Pomrnandp 

vUl 1 II 1 IU 1 IUC 


: PWD 


Reponse : 


257 "/" is current directory. 


Commande 


: TYPE A 


Reponse : 


200 Type set to A 


fnmrririnrfp 

\^ \j\ i ii i iu i iuc 


: PASV 


Reponse : 


227 Entering Passive Mode (127,0,0,1,5,109) 


C nrnmanrip 

L^UI 1 II 1 IUI IUC 


: LIST 


Reponse : 


150 Connection accepted 


Reponse : 


226 Transfer OK 


Etat : 


Succes du li stage du repertoire 


Commande 


: PWD 


Reponse : 


257 "/" i s current directory. 


Commande 


: TYPE A 


Reponse : 


200 Type set to A 



Du cote du serveur, vous avez des messages de logs equivalents au moment de 
la connexion : 

(000001) 11/08/2006 21:16:39 - (not logged in) (127.0.0.1)> 
Connected, sending welcome message... 

(000001) 11/08/2006 21:16:39 - (not logged in) (127.0.0.1)> 
USER test 

(000001) 11/08/2006 21:16:39 - (not logged in) (127.0.0.1)> 
331 Password required for test 

(000001) 11/08/2006 21:16:39 - (not logged in) (127.0.0.1)> 
PASS **** 

(000001) 11/08/2006 21:16:39 - test (127.0.0. 1)> 
230 Logged on 



Classe FTPCIient 

Vous pouvez a present realiser la classe FTPC1 ient d'aide a la connexion a un 
serveur, au passage de commandes et a la recuperation des reponses. Vous 
pourrez ensuite faire une interface utilisateur adequate et utiliser cette classe et 
ses methodes. 

L'utilisation de cette classe pour realiser des operations de base telles que la 
connexion a un serveur, la recuperation et 1' upload d'un fichier, devra etre 
simple : 

Dim ftp As New FTPd ient ("ftp: //"local host", "test", "test") 
ftp.DownloadC'/MonFichier.txt", "C:\MonFichier.txt") 
ftp. Upload("C:\MonFi chier.txt", "/MonFi chier.txt") 

Pour developper cette classe, vous utiliserez en majeure partie l'espace de noms 
System. Net. Voici une explication de ces differents membres et methodes. 
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Constructeur 

Le constructeur prend en parametre les informations de connexion : 

Private _host As String 
Private _username As String 
Private _password As String 

Sub New(ByVal Host As String, ByVal Username As String, 
ByVal Password As String) 

_host = Host 

jisername = User 

_password = Password 

End Sub 



Methode GetRequest 

Pour effectuer une commande FTP, vous devez utiliser un objet FtpWebRequest. 
Pour recuperer facilement un tel objet, vous allez creer la methode GetRequest, 
qui prend une adresse FTP en parametre. Vous utiliserez cette methode de cette 
facon : 

Dim ftp As Net. FtpWebRequest = _ 
GetRequest (Hostname & sourceFilename) 

Le code de la fonction est le suivant : 

Private Function GetRequest (ByVal URI As String) 
As FtpWebRequest 
Dim result As FtpWebRequest = 
CType(FtpWebRequest.Create(URI) , FtpWebRequest) 
result. Credentials = 

New Net. NetworkCredential (Username, Password) 
result. KeepAl ive = False 
Return result 
End Function 

L'objet NetworkCredential permet de passer les informations de connexion de 
l'utilisateur. 

Methode Download 

La methode prend en parametre le chemin relatif du fichier source sur le 
serveur et le chemin physique : 

Public Function Download (ByVal sourceFilename As String, 
ByVal local Filename As String) As Boolean 
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Vous devez envoyer la commande de telechargement au serveur. II faut done 
specifier a la requete le type de commande, en affectant la propriete Method qui 
correspond au type de commande a effectuer : 

ftp. Method = Net.WebRequestMethods.Ftp.DownloadFile 



La structure WebRequestMethods contient l'ensemble des types de commandes 
possibles. 



WebRequestMethods . Ftp . DownloadF i le 






±i | AppendFile 






M DeieteFile 






DownloadFile 






v Equals 






jj GetDateTimestamp 






Si GetFileSize 






■ ListDirectory 






M ListDirectoryDetails 






3 MakeDirectory 






M PrintWorkingDirectory 


V 




Commun Tous 





■< Figure 25-24 : 

Gestionnaire de sites 



Apres avoir cree un objet Filelnfo pour le fichier de destination, vous pouvez 
recuperer la reponse de la requete dans un flux et remplir le fichier : 

Using response As FtpWebResponse = 

CType(ftp.GetResponse, FtpWebResponse) 
Using responseStream As Stream = 
response. GetResponseStream 
Using fs As FileStream = fi.OpenWrite 
Try 

Dim buffer(2047) As Byte 
Dim read As Integer = 0 
Do 

read = 

responseStream. Read (buffer, 0, buffer. Length) 
fs.Write(buffer, 0, read) 
Loop Until read = 0 
responseStream. CI ose() 
fs.Flush() 
fs.Close() 
Catch ex As Exception 
fs.Close() 
fi.Delete() 
Throw 
End Try 
End Using 

responseStream. CI ose() 
End Using 
response. CI ose() 
End Using 
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Methode Upload 

D'une maniere similaire, developpez la methode Upload, qui prend en parame- 
tre le chemin du fichier a uploader et le chemin relatif du fichier de destination 
sur le serveur : 

Public Function Upload (ByVal local Filename As String, 
Optional ByVal targetFilename As String = "") As Boolean 

Le type de requete est cette fois UploadFile : 
ftp. Method = Net. WebRequestMethods. Ftp. UploadFile 

En outre, vous n'ecrivez plus, mais vous lisez le fichier source et vous envoyez 
son contenu dans un flux : 

ftp.ContentLength = f i . Length 
Const BufferSize As Integer = 2048 
Dim content (BufferSize - 1) As Byte 
Dim dataRead As Integer 
Using fs As FileStream = fi .OpenReadQ 
Try 

Using rs As Stream = ftp.GetRequestStream 
Do 

dataRead = fs. Read (content, 0, BufferSize) 
rs. Write (content, 0, dataRead) 
Loop Until dataRead < BufferSize 
rs.Close() 
End Using 
Catch ex As Exception 

Finally 

fs.Close() 
End Try 

End Using 



Methode GetResponse 

Pour la plupart des commandes, le serveur renvoie un message. La methode 
GetResponse permet de recuperer facilement ce message : 

Private Function GetResponse (ByVal ftp As FtpWebRequest) 
As String 
Dim result As String = "" 
Using response As FtpWebResponse = 
CType (ftp. GetResponse, FtpWebResponse) 

Dim size As Long = response. ContentLength 
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Using datastream As Stream = 
response . GetResponseStream 

Using sr As New StreamReader(datastream) 
result = sr.ReadToEnd() 
sr.Close() 
End Using 
datastream. CI ose() 
End Using 
response. CloseQ 
End Using 
Return result 
End Function 

Vous pourrez notamment l'utiliser de la maniere suivante : 

ftp. Method = Net.WebRequestMethods.Ftp.DeleteFile 
Dim strResponse As String = GetResponse(ftp) 



25.4 Check-list 

Au cours de ce chapitre, vous avez utilise differences classes de l'espace de 
noms System. Net pour creer une classe d'aide qui permet de realiser les 
operations FTP de base. Voici ce que vous avez egalement decouvert : 

■ 1' installation d'un serveur FTP ; 

■ la creation d'un compte utilisateur FTP et la configuration de ses droits 

d'acces ; 

■ l'utilisation d'un client FTP et de ses fonctionnalites de base ; 

■ la connexion a un serveur FTP ; 

■ le telechargement de fichiers (upload et download) ; 

■ la gestion des repertoires ; 

■ le listage des fichiers. 
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26.1 Glossaire 

.NET 

Plateforme de developpement multilangage creee par Microsoft. 

.NET Compact Framework 

Environnement independant du materiel pour F execution de programmes sur 
des peripheriques informatiques soumis a des contraintes de ressources. II herite 
de l'architecture .NET Framework complete du Common Language Runtime, 
prend en charge un sous-ensemble de la bibliotheque de classes .NET Fra- 
mework et contient des classes exclusivement concues pour le .NET Compact 
Framework. Les peripheriques pris en charge incluent les Assistants numeri- 
ques personnels (PDA), tels que les PC de poche, les telephones mobiles, les 
decodeurs, les peripheriques informatiques automobiles et les peripheriques 
incorpores personnalises crees avec le systeme d' exploitation Microsoft Win- 
dows CE .NET. 

Acces aux donnees 

Partie du developpement permettant le stockage et la restitution de l' informa- 
tion saisie. 

ADO .NET 

Technologie du Framework .NET permettant la gestion complete de Faeces aux 
donnees. 

Appartenance [membership) 

Fonctionnalite de gestion des utilisateurs d'une application web. 

Application d'interface multidocument (MDI) 

Application qui comporte un formulaire principal pouvant accueillir d'autres 
formulaires. Ces derniers, considered comme des formulaires enfants, ne 
peuvent s'afficher que dans le formulaire parent. Si Fapplication contient des 
menus ou des barres d'outils, ces elements sont generalement partages entre le 
formulaire parent et ses enfants. 

ASP .NET 

Technologie de developpement de sites et de services web du Framework .NET. 

Assembly 

Resultat de la compilation d'une bibliotheque de classes en un fichier avec une 
extension .dll. 
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Authentification 

Notion de securite. Etape par laquelle un utilisateur doit passer avant d'acceder 
a une zone securisee. L' authentification peut se faire grace a la saisie 
d' informations de connexion, comme un identifiant et un mot de passe, ou en 
fonction des droits d'acces attribues sur un ordinateur ou un reseau. 

BCL (Base Class Library) 

Librairies de classes de base, qui distribuent les blocs fondamentaux a tout 
developpement d' application .NET 

CAB 

Fichier compresse contenant une application a installer. 

Cache ou Mise en cache 

Mise en memoire d' informations ou de pages, qui vise a ameliorer les 
performances d'une application. 

ChaTne de connexion [connection string) 

Element a fournir pour specifier les informations de connexion a une base de 
donnees. 

Conforme CLS (CLS-compliant) 

Code exposant publiquement les fonctionnalites de langue (et elles seules) 
figurant dans la Common Language Specification. La conformite CLS peut 
s'appliquer aux classes, interfaces, composants et outils. Voir aussi : Common 
Language Specification (CLS). 

Classes unifiees 

Bibliotheque de classes, d' interfaces et de types de valeurs, incluse dans le kit 
de developpement .NET Framework SDK de Microsoft. Cette bibliotheque, qui 
permet d'acceder aux fonctionnalites du systeme, est le fondement des appli- 
cations, composants et controles du Framework .NET. Voir aussi : Common 
Language Specification, Conformite CLS. 

Cle etrangere 

Champ d'une table indiquant une liaison entre deux tables. 

Cle primaire 

Champ d'une table permettant d'identifier de facon unique un enregistrement. 
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ClickOnce 

Technologie .NET de deploiement et de mise a jour integree dans les applica- 
tions Windows. 

CLR (Common Language Runtime] 

Moteur d' execution interne du Framework Microsoft .NET. II prend en charge 
le code manage en fournissant des services comme l'integration du multilan- 
gage, la gestion du cycle de vie des objets, la securite d'acces au code, la 
gestion des ressources, le debogage. 

CLS ou Common Language Specification 

Specification de langage commune. Ensemble des specifications qu'un langage 
doit respecter, notamment en ce qui concerne la programmation objet, pour 
pouvoir etre integre a la plateforme .NET. 

Code Behind 

Code d'une page web dans un fichier de classe separe du fichier correspondant 
a l'apparence. 

Code manage (managed code) 

Code execute par l'environnement du Common Language Runtime, et non 
directement par le systeme d' exploitation. Les applications de code manage 
beneficient des services Common Language Runtime tels que les operations de 
ramasse-miettes automatiques, la verification du type au moment de 1' execu- 
tion, la prise en charge de la securite, etc. Grace a ces services, les applications 
de code manage ont un comportement uniforme, independant de la plateforme 
(et du langage). 

Code non manage (unmanaged code) 

Code directement execute par le systeme d' exploitation, hors de l'environne- 
ment du Common Language Runtime. Le code non manage doit fournir ses 
propres operations de ramasse-miettes, de verification du type, de prise en 
charge de la securite, etc., contrairement au code manage, qui recoit ces 
services du Common Language Runtime. Voir aussi : Code manage. 

Composant 

Objet qui n'a pas de representation graphique et qui n'est done pas visible sur 
le rendu final du formulaire lors de son execution. 
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Concepteur de projet 

Interface de l'environnement Microsoft Visual Basic 2005 Express, permettant 
de parameter divers elements associes a un projet .NET, le tout organise par 
onglets. 

Concepteur de vues 

Espace de l'environnement Microsoft Visual Basic 2005 Express, donnant un 
apercu graphique du formulaire. 

Conteneur de donnees 

Objet de l'espace de noms System. Data, permettant une representation fidele de 
la base de donnees en mode deconnecte. 

Controle 

Objet qui s'affiche, directement visible sur le formulaire en mode Design. II 
existe differents types de controles. 

Controle d'evenement 

Controle qui genere un evenement dans le cadre d'une interaction avec 
l'utilisateur. 

Controle d'affichage 

Controle qui permet d'afficher du texte a titre d' information. 

Controle de saisie 

Controle qui permet a l'utilisateur de saisir des valeurs. 

Conteneur 

Controle qui peut contenir d'autres controles 

Controle personnalise 

Controle heritant de la classe System. Windows. Form. Control, dont on recrit 
entierement le comportement (logique metier) et le rendu graphique (il devra 
surcharger la methode Paint). 

Controle utilisateur ou composite 

Controle heritant de la classe System. Wi ndows . Form. UserControl , qui est com- 
pose d'un ensemble de controles preexistants et dont on peut personnaliser le 
comportement metier. 
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CSS [Cascading Style Sheet) 

Feuille de style en cascade. Fichier de declaration de style pour des balises 
HTML. 

CTS [Common Type System] 

Systeme de type commun. Specification determinant la facon dont le Common 
Language Runtime definit, utilise et gere les types. 

Debogueur [debugger) 

Fonctionnalite qui permet de derouler pas a pas 1' execution d'un programme 
pour verifier que le comportement du code correspond bien aux attentes du 
developpeur. Les valeurs des variables peuvent egalement etre inspectees. Un 
debogueur sert notamment a placer les points d'arret au niveau des sections de 
code par lesquelles il faut passer. 

EDI [environnement de developpement integre) 

Logiciel qui prend en charge une technologie de developpement. II peut 
proposer des fonctionnalites qui permettent de programmer des applications 
plus facilement, comme des editeurs de code, des boites de dialogue, des 
Assistants, des pages d'aide, des fenetres de configuration et differents autres 
outils associes (compilateur, debogueur). 

Entrepots de donnees 

Methodes de stockage de l'information, systeme de gestion de bases de 
donnees, fichiers plats, fichiers XML, etc. 

Explorateur de serveurs 

Fenetre de 1' environnement Microsoft Visual Basic 2005 Express affichant 
l'arborescence d'une base de donnees. 

Explorateur de solutions 

Fenetre de 1' environnement Microsoft Visual Basic 2005 Express affichant 
l'arborescence de la solution .NET ouverte. 

Fournisseur [provider) 

Ensemble de classes encapsulant toute la logique qui permet de mettre en place 
une fonctionnalite avancee pour un site web. Le modele de base de fournisseur 
et les fournisseurs par defaut peuvent etre etendus pour repondre a vos besoins. 
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Fournisseurs manages 

Objets manages permettant la communication avec differents systemes de 
gestion de bases de donnees. lis permettent Faeces a SQL Server, Oracle ou a 
toute source de donnees de type ODBC ou OLEDB. 

Framework 

Ensemble de bibliotheques fournissant des briques logicielles qui permettent le 
developpement rapide d' applications. 

Gestionnaire d'evenements 

Code au sein d'un programme, qui repond a une action provoquee par 
l'utilisateur. On peut deleguer la gestion des evenements a Microsoft Visual 
Basic 2005 Express (mots-cles Handles et WithEvents) ou le gerer soi-meme 
par code (mots-cles AddHandler, RemoveHandl er, AddressOf). 

HTML (HyperText Markup Language) 

Langage a balises hypertextes, qui permet d'ecrire des pages web affichables 
dans un navigateur Internet. 

HTTP (HyperText Transfer Protocol] 

Protocole de transfert de donnees utilise notamment pour acceder a des pages 
web ou a des services web. 

IDE [Integrated Development Environment) 

Voir EDI. 
IL 

Voir MSIL. 

Intellisense 

Fonctionnalite de completion de code. L'editeur peut ainsi proposer tour a tour 
les espaces de noms, puis les classes, puis les membres et enfin les parametres 
disponibles en fonction du texte que Ton a commence a saisir. 

JIT (Just in Time) 

Technique de compilation de code qui vise a ameliorer les performances. 

Librairie de classes 

Ensemble de classes. 
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Localisation ou Globalisation 

Traduction des differents composants d'une application pour 1' adapter a plu- 
sieurs cultures. 

Microsoft SQL Server Express 2005 

Version gratuite du systeme de gestion de bases de donnees de Microsoft. 

Mono 

Le projet Mono vise a fournir une implementation libre de la plateforme de 
developpement Microsoft .NET. 

MSI (Microsoft Windows Installer) 

Executable d' installation d'un logiciel. 

MSIL [Microsoft Intermediate Language) 

Langage bas niveau des instructions processeur d'execution d'un code .NET 
compile, quel que soit le langage de developpement utilise. 

Page maTtre (master page) 

Page web qui sert de modele a d'autres. 

Parametre d'application 

Variables persistantes de programme qui ont une portee globale au sein de 
l'application. Ces variables sont dans la plupart des cas en lecture seule. 

Parametre utilisateur 

Variable persistante specifique a l'utilisateur, generalement utilisee pour stacker 
les preferences de l'utilisateur. 

Plan de site [sitemap) 

Fichier dans lequel on definit la hierarchie des pages d'un site web (URL, titre, 
description...). 

PostBack 

Publication d'une page web, rafraichissement. 

Procedure stockee 

Ordre SQL stocke et execute au sein du systeme de gestion de bases de 
donnees. 
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Profil 

Stockage de donnees personnalisees relatives a un utilisateur d'un site web. 

Projet Bibliotheque de classes 

Type de projet .NET regroupant un ensemble de classes, generalement ordon- 
nees par theme ou fonctionnalite, generant au final un assembly exploitable. 

Projet WinForm 

Projet .NET permettant de concevoir des applications Windows Forms. 

Ramasse-miettes [garbage collector) 

Systeme de gestion automatique de la memoire. II est responsable du recyclage 
des ressources memoire prealablement allouees puis inutilisees. 

Service web 

Programme qui fournit des informations par le biais d'un flux XML via un 
protocole web. 

SQL (Stuctured Query Language) 

Langage utilise pour la communication avec un systeme de gestion de bases de 
donnees. 

Theme ASP .NET 

Ensemble de fichiers specifiant l'apparence graphique des elements d'une page 
web. II peut contenir des feuilles de style CSS, des images et des fichiers 
d'apparence (skin). Un site web ASP .NET peut avoir plusieurs themes 
differents. 

Runtime 

Moteur d'execution de code. 

Smart tag 

Element qui permet d'acceder aux taches courantes d'un controle en mode 
Edition. 

SMTP (Simple Mail Transfer Protocol) 

Protocole de transfert d'e-mails. 

ViewState 

Fonctionnalite qui permet de stocker l'etat des controles d'une page web entre 
deux publications. 
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Visual Web Developper 

EDI de la gamme Visual Studio permettant de developper des sites web ASP 
.NET. 

Web.config 

Fichier de configuration XML d'un site web ASP .NET. 

WebPart 

Controle de page web qui peut etre personnalise par l'utilisateur. 

XHTML [extended Markup Language) 

Langage a balises etendu. 



26.2 References web 
Coach VB2005 

www.microsoft.com/france/msdn/vbasic/decouvrez/coach.mspx 

Votre coach Visual Basic vous guide a la decouverte du developpement 
Windows sur la plateforme .NET de Microsoft. Etape par etape, suivez votre 
coach. II vous accompagne au travers d'un cursus d'initiation et de prise en 
main des concepts, des technologies et des outils. 

Blogs 

Blogs des auteurs 

■ Patrice Lamarche : http://blogs.developpeur.org/patrice/. 

■ Antoine Griffard : http://blogs.developpeur.org/tonio/. 

■ Mauricio Diaz Orlich : WWW.maddO.com/. 

H r Blogs CodeS-SourceS 

1 ij; c. Blogs, blogs, blogs et encore des blogs ! Ici les developpeurs vous font partager 

yn s ~ ^ £ leurs experiences, trouvailles mais egalementdes informations funs, 

r \ Bre ^ ' a vie tous les jours des developpeurs pas forcement braques sur du code ! 



CodeS-SourceS Blogs Photos Fichiers Roller 

▲ Figure 26-1 : Les blogs du reseau CodeS-SourceS 
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Blogs anglais 

■ MSDN Blogs US : http://blogs.msdn.com/default.aspx. 

■ MSDN-ASP .NET US : http://weblogs.asp.net/. 

■ Microsoft Belgique : www.microsoft.com/belux/fr/msdn/community/blogs.mspx. 

Blogs francophones 

■ Blogs du reseau CodeS-SourceS : http://blogs.developpeur.org/. 

■ Microsoft France : http://blOgS.microsoft.fr/. 

Communautes 

Vous trouverez dans ce qui suit, la liste des communautes, avec un bref 
descriptif de leurs createurs. 

ASP-PHP .NET 

www.asp-php.net/ 

Plateforme ouverte aux redacteurs de tous horizons, la communaute ASP-PHP 
.NET aborde les differents langages majeurs dTnternet, tout en restant "ni 
categoriquement pour l'un, ni farouchement contre l'autre !". Regroupant une 
large gamme de tutoriaux, de scripts et d' articles, ASP-PHP .NET se veut 
pedagogique, orientee vers la formation des visiteurs debutants, et objective 
quant aux comparaisons technologiques. Son forum reste une aide precieuse 
pour tous les visiteurs du fait de la qualite des intervenants issus de technolo- 
gies di verses et variees. 




www.asp-php.net 



▲ Figure 26-2 : Communaute ASP-PHP .NET 
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C2i.fr 

www.c2i.fr/ 

C2i.fr fut tout d'abord un site consacre a Visual Basic (4, 5 et 6). Des juin 2000, 
des articles sur la plateforme .NET de Microsoft sont publies, consacres a 
toutes les technologies .NET (WinForm, WebForm, Web Service, Compact 
Framework...), aussi bien en VB .NET qu'en C#. Ce fut le premier site 
francophone developpe en ASP .NET. Vous trouverez sur C2i.fr un fil quotidien 
d' informations sur .NET, des articles, des forums actifs ou poser vos questions. 

CodePPC 

www.codeppc.com 

La communaute CodePPC est composee de developpeurs qui programment ou 
qui veulent programmer pour la plateforme Pocket PC. La majorite des membres 
est francophone, meme si des contacts sont noues avec des personnes des 
Etats-Unis, du Japon et de certains pays d'Europe. Le but est de proposer des 
articles clairs, simples et pratiques pour aider au maximum les developpeurs a 
creer des applications pour cette plateforme. Un forum permet aux membres de 
poser leurs questions et d'aider les autres. Des programmes avec leurs sources 
sont aussi disponibles ; leur analyse est l'un des meilleurs moyens de progresser. 

CodeS-SourceS 

www.codes-sources.com 

La communaute de reference avec plus de quatorze langages represented : VB, VB 
.NET, ASP, ASP .NET, SQL, C/C++, C#, assembleur, Flash, Delphi, ColdFusion, 
PHP, JavaScript, Java, Scripting Graphique, Scripting IRC, Pocket PC & Palm. Le 
reseau CodeS-SourceS est une communaute de developpeurs francophones de 
cultures informatiques variees. Cette communaute regroupe plus de six cent mille 
membres a travers une idee simple : "partager ses connaissances". 




A Figure 26-3 : Reseau de communautes CodeS-SourceS 
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Developpez.com 

www.developpez.com 

Developpez.com apporte aux developpeurs une multitude de news, de cours, de 
tutorats, d'articles, de FAQ, d'outils, de composants et d'exemples de codes 
rediges par des redacteurs benevoles passionnes, qui desirent partager leurs 
connaissances. Developpez.com a pour vocation d' aider n'importe quel deve- 
loppeur, quels que soient son niveau et le langage de programmation qu'il 
utilise, mais focalise cependant ses efforts sur la formation et l'aide au 
professionnels. 

Dotnet-Project 

www.Dotnet-Project.com 

Dotnet-Project est le nouveau site de la communaute Dotnet en France. II est le 
fruit de la collaboration entre Nix de CodeS-SourceS, Redo de ASP-PHP, Kevin 
de Dotnet-fr, Richard de C2i et Aleksandar Lukic. Vous y trouverez des projets 
complets realises principalement avec la technologie .NET. Le plus souvent 
possible, leurs sources sont disponibles. Vous trouverez actuellement les starters 
kits traduits en francais. Le but est principalement de promouvoir le travail de 
chacun. Pour cela, des espaces sont mis en place pour mettre en valeur les projets 
les plus meritants, mais egalement leurs auteurs. Les developpeurs seront 
interesses, mais aussi les chefs de projets, qui trouveront ici des solutions toutes 
faites ou a modifier legerement pour les integrer a leurs projets et passer a la 
vitesse superieure ! 

Labo-dotnet 

www.labo-dotnet.com 

Le laboratoire des technologies de developpement Microsoft .NET a ete cree par 
des eleves ingenieurs de Sup-Info Paris (WWW.Supinfo.com) dans le but de repondre 
a la question suivante : "Quelles competences sont necessaires pour faire d'un 
developpeur un veritable expert des technologies de developpement .NET ?". 




SUPINFO 



Figure 26-4 : Site 
du Laboratoire .NET 
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Tech Head Brothers 
www.Tech Head Brothers.com 

Tech Head Brothers est un portail francophone d' informations, d'articles et 
d'astuces techniques haut de gamme sur les technologies orientees developpeur 
de Microsoft. Fonde et anime depuis 2001 par Laurent Kempe (MVP .NET) et 
Mathieu Kempe (MVP .NET). 
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▲ Figure 26-5 : Communaute Tech Head Brothers 

INETA [International .NET Association) 
www.ineta.org 

Cette association a but non lucratif a pour vocation de federer T ensemble des 
groupes d'utilisateurs interesses par la plateforme de Microsoft .NET. Sa 
mission est de proposer une assistance et des ressources utiles aux communau- 
tes ou aux groupes d'utilisateurs qui promeuvent et informent techniquement 
leurs membres sur les technologies .NET. LTNETA est formee d'un bureau de 
responsables de groupes d'utilisateurs, elus par leurs pairs. Elle est soutenue par 
Microsoft Corporation et autres sponsors. 
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Find User Groups 



INETA is the next evolution in user group a 
- a non-profit, independent organization, chartered with 
supporting all user groups Interested in the Murasott 
NET platform INETA is fun by a board ol user group 
leaders, elected by their peers, and supported by 
Microsoft Corporation and other sponsors. 
Read More > 



I News and Features 
Birds of a Feather 2006 

Call for Proposals — Run a Birds of a Feather Session at Tach-Ed 200C If you're going to Tech-Ed 
I 2006, June 11-16, in Boston, you'll be listening to Microsoft experts, partners and gurus on a range 
I of topics. But what about the other topics you find important and interesting? 



INETA Live! 



Olive .'If 
inefa a. 



I Northeast Regional User Group Leadership Summit 
| Are you involved in leading a user group' If so, the first in a 
mmits will be held Sunday, 6.11.2005 in Boston, MA. 



r group leadership 




A Figure 26-6 : INETA 

Communautes des experts Microsoft 

RD [Microsoft Regional Director) 

msdn.microsoft.com/isv/rd/ 

Experts et partenaires privilegies Microsoft a l'echelle mondiale, les cent 
vingt-neuf Regional Directors sont des experts sur les technologies de deve- 
loppement Microsoft, designes par Microsoft pour intervenir lors des evene- 
ments techniques en partenariat. 



Microsoft 

Regional Director 



PROGRAM 



A Figure 26-7 : Microsoft Regional 
Director 



MVP [Microsoft Most Valuable Professional) 

https://mvp.support.microsoft.com/Default.aspx 

Ce programme recompense les utilisateurs les plus actifs et les plus enthou- 
siastes, desireux de partager leurs competences techniques et leurs savoir-faire 
avec leurs pairs. II vise a reconnaitre l'apport des membres de la communaute 
les plus entreprenants, dont 1' expertise, diffusee en ligne et par ailleurs, enrichit 
l'experience de tous et permet de distinguer les communautes techniques 
concernant les produits Microsoft. 
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Figure 2B-8 : Microsoft Most 
Valuable Professional 



MVS (Microsoft Most Valuable Student) 

www.microsoft.com/france/education/sup/etudiants/mvs/default.asp 

Le titre de Most Valuable Student (MVS) recompense les etudiants faisant 
preuve d'une expertise et d'une implication exceptionnelles autour des produits 
ou technologies Microsoft. 



Liens Microsoft 

Visual Studio 

Retrouvez l'ensemble de la gamme Visual Studio 2005 a l'adresse WWW. microsoft 
.com/france/msdn/vstudio/default.mspx. 

Microsoft Developper Network 

■ Librairie MSDN2 - version francaise : http://msdn2.microsoft.com/fr-fr/ 
library/default.aspx. 

■ Librairie MSDN2 - version americaine : http://msdn2.microsoft.com/en-US/ 
library/default.aspx. 




Figure 26-9 : Microsoft Most 
Valuable Student 
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A 

AccessKey, 349 
ActionLists, 365 
ActiveStepIndex, 345 
Add, 256 
AddHandler, 187 
AddressOf, 187 
Ajax, 320 
AllowDrop, 232 
AllowReturn, 345 

Ancrer dans le conteneur parent, 34, 
79 

AppearanceEditorPart, 25 1 
Application, 229 

Application Programming Interface 
(API), 230 

ApplicationSettings, 148 
App_GlobalRessources, 304 
App_LocalRessources, 304 
App_Themes, 272 
Array 

ConstrainedCopy, 51 

ToBase64String, 51 
AspNetSqlProfileProvider, 261 
Aspnet_regsql.exe, 218 
Assemblylnfo.vb, 356 
AutoCompleteExtender, 333 



B 

BackgroundWorker, 178 
Balise active, 78 
Base de donnees 

Creation, 18 

Table, 20 
Base de registre, 234 
BehaviorEditorPart, 252 
Bibliotheque externe, 152 



BinaryFormatter, 58, 70 

Deserialize, 70 

Serialize, 70 
BindingNavigator, 66 
BindingSource, 66 

AddingNew, 69 

AllowNew, 69 

List, 70 
Bitmap, 30 
Bridge, 323 



c 

CatalogPart, 248 
CausesValidation, 347 
Chaine de connexion, 19 
ChildNode 

Nceud enfant, 284 

Cle 

de chiffrement, 49 
CollapselmageUrl, 289 
CompositeControl, 338, 358 
ConnectionString, 196, 219 
ContentPlaceHolder, 93 
ContextMenuStrip, 227 
Controle 

Login, 133 

Timer, 139 

utilisateur, 156 
ControlValueProperty, 359 
Couleur de fond, 156 
CreateGlobalResourceProvider, 316 
CreateLocalResourceProvider, 316 
CryptoStream, 51 
CryptoStreamMode 

Write, 51 
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D 

Data Source, 196 
DataTable 

GetChanges, 27 
DeclarativeCatalogPart, 248 
DefaultButton, 348 
DefaultFocus, 349 
DefaultProperty, 359 
DefaultProvider, 257 
Deplacement d'une fenetre sans 
bordure, 147 
Deserialisation, 58 
DesignerActionListCollection, 365 
DesignTimeResourceProvider 

Factory, 317 
Directory, 37 

GetFiles, 37 
Document XML, 200 
DotMSN, 152 
DragDrop, 233 
DragEventArgs, 233 
DragOver, 233 
Drives, 172 



E 

EditorPart, 250 
EditorZone, 250 
EnableLocalization, 310 
Encoding, 50 
Enregistrer des parametres 
d'application, 148 
Espace de noms My, 136 
ExecuteNonQuery, 197 
ExpandlmageUrl, 289 
Explorateur 

de disques, 170 

de serveur, 315 
Expression Builder, 305 



Extension de 1' espace de noms 
My, 143 



F 

Feuille de style en cascade, 275 
FileSystem, 172 
FixedDialog, 225 
Flux RSS, 200 
FolderBrowserDialog, 3 1 
Form 

ActiveMdiChild, 85 

BringToFront, 84 

Dock, 79 

FormClosing, 27 

Invoke, 159 

IsMdiContainer, 78 

MdiChildren, 83 

MdiParent, 82 

Name, 31 

Text, 31 
Format de texte enrichi, 76 
FormBorderStyle, 145, 225 
FormClosing, 236 
FormClosingEventArgs, 229 
Formulaire 

de demarrage, 80 

parent MDI, 77 
Form View, 112 
Fournisseur de profils, 255 
FreeTextBox, 123 
FTPClient, 403 
FtpWebRequest, 404 



G 

Gadget Live.com, 211 
Gestion 

des profils, 219 
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des raccourcis clavier, 192 
GetDirectories, 175 
GetGlobalResourceObject, 308 
GetLocalResourceObject, 308 
Globalization 

Element, 301 

Espace de noms, 300 
GridView, 101 
GroupBox 

Enabled, 26 



H 

HorizontalAlignment, 89 
HTTPHandler, 116 



I 

IComparer, 71 
Iframe, 216 
Image, 30 

FromFile, 37 

RotateFlip, 40 

Save, 41 
ImageList, 34, 171 

ImageSize, 34 

View, 34 

Vue, 34 
ImageSet, 289 
ImageUrl, 289 
ImportCatalogPart, 249 
InitializeCulture, 312 
Interface graphique 

Synchronisation interthread, 159 
Interface multidocument, 76 
Interval, 139 
IV, 49 



K 

KeyDown, 192 



L 

LayoutEditorPart, 251 
LeafNode 

Noeud feuille, 284 
LinelmagesFolder, 289 
List 

Sort, 73 
ListBox, 175, 226 
ListView, 34, 155, 170 

Ensure Visible, 39 

Grand ImageList, 34 

LargelmageList, 34 

MultiSelect, 34 

SelectedlndexChanged, 38 
Localizable, 305 
Login, 133 
LstFolders, 175 



M 

MailMessage, 53 
Manifeste gadget, 217 
MaximizeBox, 225 
MDI, 76 

MemoryStream, 50 
Menultem 

PerformClick, 86 
MenuStrip, 32 
Meta 

Resourcekey, 306 
Method 

WebRequestMethods, 405 
MigrateAnonymous, 264 
Mise en forme automatique, 271 
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MoveTo, 345 
MsgBox, 229 
My.Computer.Info, 137 



N 

NetworkCredential, 404 
NextButtonClick, 345 
Notifylcon, 227 



o 

ObjectDataSource, 99 
Opacity, 146 
OpenFileDialog, 84 



P 

Page maitre, 93 
PageCatalogPart, 249 
Parameters, 197 
ParentNode 

Noeud parent, 284 
Path, 84 

GetFileName, 84 
Persistance, 259 
Personalizable, 247 
PictureBox, 35, 226 

Refresh, 40 
Plan de site 

Localisation, 308 
PopulateNodesFromClient, 294 
PopulateOnDemand, 293 
Profile, 255 
ProgressBar, 138 
Properties, 256 
PropertyGridEditorPart, 250 



Propriete, 255 



R 

Really Simple Syndication, 200 
Reference, 153 
Registry, 234 
RegistryKey, 234 
RegularExpression Validator, 348 
RequiredFieldValidator, 347 
ResourceProviderFactory, 313 
ResourceProviderFactoryType, 313 
Resources, 305 
ResX, 301 

Rfc2898DeriveBytes, 50 

GetBytes, 51 
Rich Text Format, 76 
RichTextBox, 76 

Copy, 88 

Cut, 88 

LoadFile, 84 

Paste, 88 

Redo, 88 

SaveFile, 86 

SelectAll, 88 

SelectionAlignement, 89 

SelectionColor, 90 

Undo, 88 
Rij ndaelManaged 

CreateDecryptor, 52 

CreateEncryptor, 51 

IV, 51 

Key, 51 
RootNode 

Nceud racine, 285 
RotateFilpType, 40 
RSS, 200 
RTF, 76 
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s 

Salt, 49 

SaveFileDialog, 31, 85 
SelectedlndexChanged, 23 1 
Serialisant, 254 
Serialisation, 58 

XML, 97 
Serializable, 60 
SetFocus, 349 
SetFocusOnError, 349 
ShowInTaskBar, 229 
Sitemap, 95 

SiteMapDataSource, 96, 295 
Smart tag 

Balise active, 365 
SmtpClient, 53 

SendAsync, 53 

SendCompleted, 53 
Source de donnees, 63 
SplitButton, 185 
SplitContainer, 33 

IsSplitterFixed, 33 
SqlCommand, 122, 196 
SqlConnection, 122, 196 
StartFromCurrentNode, 296 
StartingNodeOffset, 296 
StartingNodeUrl, 296 
StatusStrip, 33, 155 
StepType, 339 
String 

IsNotNullOrEmpty, 86 
StyleSheetTheme, 276 
SupportedDisplayModes, 243 
Synchronisation de l'interface 
graphique, 159 
System.Data, 122 
System.Data.SqlClient, 122, 195 
System.IO, 170 
System.Net, 403 
System.Net.Mail, 102 



System.UI.WebControls.Web 

Parts, 238 
System.Windows.Forms, 170 
System.XML, 235 
System.Xml. Serialization, 98 
SystemParametersInfo, 230 
TabControl, 65, 155, 186 
Tablndex, 349 
TabPage, 186 
TextBox 

Multiline, 156 

UseSystemPasswordChar, 156 
Theme, 272, 276 

global, 277 
Thread, 158 
ToolStrip, 35, 185 

Dock, 35 

GripStyle, 35 
ToolStripMenuItem 

Image, 32 

ShortcutKeys, 32 
ToolStripSplitButton, 186 
ToolStripStatusLabel, 155 
ToolStripTextBox, 186 
TreeNode, 285 
TreeNodePopulate, 293 
Tree View, 94 
Try Catch, 122 



u 

User32.dll, 230 
UseSubmitBehavior, 349 



V 

Validateur, 347 
ValidationSummary, 348 
Vecteur d'initialisation, 49 
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ViewState, 359 
Vscontent, 381 
Vstemplate, 377, 382 



w 

Web.config, 256 
WebBrowsable, 247 
WebBrowser, 187 
WebDescription, 247 
WebDisplayName, 247 
WebPartDisplayMode, 242 
WebPartManager, 241 
WebParts (element), 238 
WebPartZone, 241 
Windows Management 
Instrumentation, 141 



Windows Sharepoint Services 

WSS, 238 
Wizard, 338 



X 

XmlDataSource, 202, 295 
XmlDocument, 235 
XmlHttpRequest, 320 
XmlSerializer, 98 
XmlTextWriter, 235 



z 

ZoneTemplate, 250 
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